axios基础及源码解析


参考资料

Axios中文说明

概览

axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。基本特性如下:

  • 从浏览器中创建XMLHttpRequest
  • 从node.js中创建http请求
  • 支持Promise api
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF

基本使用

  • 创建实例:axios.create([config])
    var instance = axios.create({
    baseURL: 'https://www.example.com/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
    });
    
  • config配置项
    {
    // `url` 是用于请求的服务器 URL
    url: '/api',
    // `method` 是创建请求时使用的方法
    method: 'get', // 默认是 get,可选get,delete,head,post,put,patch
    // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL
    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    baseURL: 'https://www.example.com/api/',
    // `transformRequest` 允许在向服务器发送前,修改请求数据
    // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
    // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
    transformRequest: [function (data) {
      // 对 data 进行任意转换处理
      return data;
    }],
    // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
    transformResponse: [function (data) {
      // 对 data 进行任意转换处理
      return data;
    }],
    // `headers` 是即将被发送的自定义请求头
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    // `params` 是即将与请求一起发送的 URL 参数
    // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
    params: {
      ID: 12345
    },
    // `paramsSerializer` 是一个负责 `params` 序列化的函数
    // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
    paramsSerializer: function(params) {
      return Qs.stringify(params, {arrayFormat: 'brackets'})
    },
    // `data` 是作为请求主体被发送的数据
    // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
    // 在没有设置 `transformRequest` 时,必须是以下类型之一:
    // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
    // - 浏览器专属:FormData, File, Blob
    // - Node 专属: Stream
    data: {
      firstName: 'Fred'
    },
    // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
    // 如果请求话费了超过 `timeout` 的时间,请求将被中断
    timeout: 1000,
    // `withCredentials` 表示跨域请求时是否需要使用凭证
    withCredentials: false, // 默认的
    // `adapter` 允许自定义处理请求,以使测试更轻松
    // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
    adapter: function (config) {
      /* ... */
    },
    // `auth` 表示应该使用 HTTP 基础验证,并提供凭据
    // 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
    auth: {
      username: 'janedoe',
      password: 's00pers3cret'
    },
    // `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    responseType: 'json', // 默认的
    // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
    xsrfCookieName: 'XSRF-TOKEN', // default
    // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
    xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的
    // `onUploadProgress` 允许为上传处理进度事件
    onUploadProgress: function (progressEvent) {
      // 对原生进度事件的处理
    },
    // `onDownloadProgress` 允许为下载处理进度事件
    onDownloadProgress: function (progressEvent) {
      // 对原生进度事件的处理
    },
    // `maxContentLength` 定义允许的响应内容的最大尺寸
    maxContentLength: 2000,
    // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte
    validateStatus: function (status) {
      return status >= 200 && status < 300; // 默认的
    },
    // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
    // 如果设置为0,将不会 follow 任何重定向
    maxRedirects: 5, // 默认的
    // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项:
    // `keepAlive` 默认没有启用
    httpAgent: new http.Agent({ keepAlive: true }),
    httpsAgent: new https.Agent({ keepAlive: true }),
    // 'proxy' 定义代理服务器的主机名称和端口
    // `auth` 表示 HTTP 基础验证应当用于连接代理,并提供凭据
    // 这将会设置一个 `Proxy-Authorization` 头,覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
    proxy: {
      host: '127.0.0.1',
      port: 9000,
      auth: : {
        username: 'mikeymike',
        password: 'rapunz3l'
      }
    },
    // `cancelToken` 指定用于取消请求的 cancel token
    // (查看后面的 Cancellation 这节了解更多)
    cancelToken: new CancelToken(function (cancel) {
    })
    }
    
    • 配置的优先顺序:在 lib/defaults.js 找到的库的默认值,然后是实例的 defaults 属性,最后是请求的 config 参数。后者将优先于前者
  • 响应结构
    //then默认传入一个response,结构如下:
    {
    // `data` 由服务器提供的响应
    data: {},
    // `status` 来自服务器响应的 HTTP 状态码
    status: 200,
    // `statusText` 来自服务器响应的 HTTP 状态信息
    statusText: 'OK',
    // `headers` 服务器响应的头
    headers: {},
    // `config` 是为请求提供的配置信息
    config: {}
    }
    
  • 并发:axios.all(iterable)axios.spread(callback)
    axios.all([
    axios.get('https://api.github.com/users/mzabriskie'),
    axios.get('https://api.github.com/users/mzabriskie/orgs')
    ]).then(axios.spread(function (user, orgs) {
    document.getElementById('username').innerHTML = user.data.name;
    document.getElementById('orgs').innerHTML = orgs.data.map(function (org) {
      return (
        `<li class="row">
          <img src="${org.avatar_url}" class="col-md-1"/>
        </li>`
      );
    }).join('');
    }));
    
  • post请求及处理
    //client
    axios.post('/post/server', JSON.parse(data))
    .then(function (res) {
      output.innerHTML = res.data;
    })
    .catch(function (err) {
      output.innerHTML = err.message;
    });
    };
    //server
    module.exports = function (req, res) {
    var data = '';
    req.on('data', function (chunk) {
      data += chunk;
    });
    req.on('end', function () {
      console.log('POST data received');
      res.writeHead(200, {
        'Content-Type': 'text/json'
      });
      res.write(JSON.stringify(data));
      res.end();
    });
    };
    
  • get请求
    axios.get('/user', {
      params: {
        ID: 12345
      }
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
    
  • 请求拦截
    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      return response;
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
    });
    // 移除拦截器
    var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
    axios.interceptors.request.eject(myInterceptor);
    
  • 取消
    var CancelToken = axios.CancelToken;
    var source = CancelToken.source();
    axios.get('/user/12345', {
    cancelToken: source.token
    }).catch(function(thrown) {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      // 处理错误
    }
    });
    // 取消请求(message 参数是可选的)
    source.cancel('Operation canceled by the user.');
    

源码解析

  • 源码目录
    axios folder

  • 入口axios.js中实例的创建

    • 合并配置项,创建实例
      axios.create = function create(instanceConfig) {
      return createInstance(mergeConfig(axios.defaults, instanceConfig));
      };
      module.exports = axios;
      
    • all方法是通过promise重新包装的
      axios.all = function all(promises) {
      return Promise.all(promises);
      };
      
  • 默认配置defaults.js
    • 设置默认内容类型
      var DEFAULT_CONTENT_TYPE = {
      'Content-Type': 'application/x-www-form-urlencoded'
      };
      utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
      defaults.headers[method] = utils.merge(DEFAULT_CONTENT_TYPE);
      });
      utils.forEach(['delete', 'get', 'head'], function forEachMethodNoData(method) {
      defaults.headers[method] = {};
      });
      
    • 默认xsrf验证
      xsrfCookieName: 'XSRF-TOKEN',
      xsrfHeaderName: 'X-XSRF-TOKEN',
      
    • 检测环境:通过检测process对象检测是否是node环境或者浏览器环境
      function getDefaultAdapter() {
      var adapter;
      // Only Node.JS has a process variable that is of [[Class]] process
      if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
        // For node use HTTP adapter
        adapter = require('./adapters/http');
      } else if (typeof XMLHttpRequest !== 'undefined') {
        // For browsers use XHR adapter
        adapter = require('./adapters/xhr');
      }
      return adapter;
      }
      
    • 请求前数据类型的检测及转换
      transformRequest: [function transformRequest(data, headers) {
      normalizeHeaderName(headers, 'Accept');
      normalizeHeaderName(headers, 'Content-Type');
      if (utils.isFormData(data) ||
        utils.isArrayBuffer(data) ||
        utils.isBuffer(data) ||
        utils.isStream(data) ||
        utils.isFile(data) ||
        utils.isBlob(data)
      ) {
        return data;
      }
      if (utils.isArrayBufferView(data)) {
        return data.buffer;
      }
      if (utils.isURLSearchParams(data)) {
        setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
        return data.toString();
      }
      if (utils.isObject(data)) {
        setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
        return JSON.stringify(data);
      }
      return data;
      }],
      
    • 默认resolve的状态码验证
      validateStatus: function validateStatus(status) {
      return status >= 200 && status < 300;
      }
      
  • core中定义了一个Axios的类,有接口暴露,用户可以定义类继承
    function Axios(instanceConfig) {
    this.defaults = instanceConfig;
    this.interceptors = {
      request: new InterceptorManager(),
      response: new InterceptorManager()
    };
    }
    
    • 拦截器添加和删除
      InterceptorManager.prototype.use = function use(fulfilled, rejected) {
      this.handlers.push({
        fulfilled: fulfilled,
        rejected: rejected
      });
      return this.handlers.length - 1;
      };
      InterceptorManager.prototype.eject = function eject(id) {
      if (this.handlers[id]) {
        this.handlers[id] = null;
      }
      };
      
    • core/settle.js:resolve及reject处理
      module.exports = function settle(resolve, reject, response) {
      var validateStatus = response.config.validateStatus;
      if (!validateStatus || validateStatus(response.status)) {
        resolve(response);
      } else {
        reject(createError(
          'Request failed with status code ' + response.status,
          response.config,
          null,
          response.request,
          response
        ));
      }
      };
      
  • adapter中针对node.js和浏览器环境,封装http和xhr提供请求
    • xhr:添加xsrf验
      // Add xsrf header
      // This is only done if running in a standard browser environment.
      // Specifically not if we're in a web worker, or react-native.
      if (utils.isStandardBrowserEnv()) {
      var cookies = require('./../helpers/cookies');
      // Add xsrf header
      var xsrfValue = (config.withCredentials || isURLSameOrigin(config.url)) && config.xsrfCookieName ?
        cookies.read(config.xsrfCookieName) :
        undefined;
      if (xsrfValue) {
        requestHeaders[config.xsrfHeaderName] = xsrfValue;
      }
      }
      
    • promise封装
      module.exports = function xhrAdapter(config) {
      return new Promise(function dispatchXhrRequest(resolve, reject){
        settle(resolve, reject, response);
      });
      

文章作者: Susie Chang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Susie Chang !
 上一篇
JavaScript设计模式(二)- 常见设计模式 JavaScript设计模式(二)- 常见设计模式
单例模式 定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点 实现//方法一 var Singleton = function (name) { this.name = name; this.instance = null;
2018-09-24
下一篇 
清除浮动方法总结 清除浮动方法总结
参考资料 CSS-清除浮动 理解当容器的高度自适应,且容器的内容中有浮动的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的C
2018-09-13
  目录