axios源码阅读

为了方便使用,axios对象既能做对象使用，又能做函数使用.

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

这一点axios是如何做到的,可以看到instance其实是一个绑定this的函数,调用axios就是调用context.request

function createInstance(){
    // 能当做函数使用的秘密
    var instance = bind(Axios.prototype.request, context);
    // 能当做对象使用的秘密
    utils.extend(instance, Axios.prototype, context);
    // 要拿到构造函数继承的属性
    utils.extend(instance, context);
    return instance
}

var axios = createInstance(defaults);

接下来我们看一下request方法，所有http请求的发送都会调用Axios.prototype.request，这个函数可以认为是整个axios的骨架，非常重要。

Axios.prototype.request = function request(config) {
    // 每个请求都会重新合成一个config,所以通过操作config对象，你可以标识请求，做某些操作，事实上每个axios的拦截器都能拿到config对象
    config = utils.merge(defaults, this.defaults, { method: 'get' }, config);
    
    // 挂载拦截器的主要逻辑
    var chain = [dispatchRequest, undefined];
    var promise = Promise.resolve(config);
    
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
    chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });

  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
    chain.push(interceptor.fulfilled, interceptor.rejected);
  });

  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }

  return promise;
}

从拦截器中的主要逻辑，我们可以得到以下几点:

• 发送请求的整个执行顺序是，requestInterceptors ——》dispatchRequest ——》responseInterceptors
• 拦截器最初接收的对象是config，axios使用中也规定，请求的拦截器必须要返回config，这也是每个请求拦截器的函数参数是config的原因
• 拦截器的执行顺序与interceptors.request.use(function () {/*...*/})执行的顺序有关,即先use的请求拦截器会先执行。
• 如果拦截器中的函数时async函数，会阻塞整个拦截器链的执行，而transformData不会，所以如果需要对请求的数据做异步处理的话，要在拦截器中完成。

看一下，不同的http method是怎么复用request方法的

utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url
    }));
  };
});

utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, data, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url,
      data: data
    }));
  };
});

接下来我们看dispatchRequest的核心逻辑：

// 处理config...

var adapter = config.adapter || defaults.adapter;

return adapter(config).then(function onAdapterResolution(response) {
throwIfCancellationRequested(config);

// Transform response data
response.data = transformData(
  response.data,
  response.headers,
  config.transformResponse
);

return response;
}, function onAdapterRejection(reason) {
if (!isCancel(reason)) {
  throwIfCancellationRequested(config);

  // Transform response data
  if (reason && reason.response) {
    reason.response.data = transformData(
      reason.response.data,
      reason.response.headers,
      config.transformResponse
    );
  }
}

return Promise.reject(reason);
});

可以看到dispatchRequest的核心逻辑大概有三步

• 处理config
• 使用adapter发送请求,axios默认内置两个adapter,一个是负责在brower发送请求的，一个是负责在node端发送请求，可以在根文件的defaults下看到
• 构造响应数据

所以通过dispatchRequest方法的阅读，我们可以得到以下启示:

• adapter是可以替换的，所以如果你觉得你的xhr或http的逻辑更适合业务的需要，完全可以替换掉，你也完全可以开发出第三种adapter以处理特定情况，比如开发一个处理缓存的adapter，事实上我现在的项目就是这样做的。
• 响应的拦截器接收到的是response对象

至此，我们已经把axios的核心逻辑阅读完毕，从中我们也可以看到axios的易用性和可拓展性非常强。

尤其是可拓展性，发送请求到接收响应的过程中的所有部分几乎都是可拓展的，尤其是config，adapter，interceptor留下了很多想象的空间。