上篇文章《axios中的参数为啥没被完全编码》里我们探讨了axios的一个小的知识点，这篇我们就接着来读读axios的源码，看看他究竟是如何实现的。

初识这个库时，第一反应，这个axios怎么读，万一读错了会不会别人笑；这样的疑问不仅我会有，后面在他的issues#802里还看到了一群人在一起讨论。高票赞同的读法是：acks--ee--oh-ss 。

用中文的相似音是： 哎克 C 欧斯  ，常见读的比较多的还有类似： 阿克休斯 。

回归到文章的主题，如果让我们去写一个网络库，需要考虑哪些点：

1、支持哪些请求方式（get、post等）

2、请求配置（超时、编码）

3、支持异步、并发

4、拦截器（请求发出前拦截、请求返回后拦截）

5、取消请求

6、请求结果回调（正确、其他的）

带着这些问题，我们来一起来看看axios的源码如何做的。

首先参看下axios的目录结构：

├── adapters
│   ├── README.md
│   ├── http.js               #node环境http对象
│   └── xhr.js                #web环境http对象
├── axios.js                  #入口
├── cancel
│   ├── Cancel.js             #取消的构造对象类
│   ├── CancelToken.js        #取消操作的包装类
│   └── isCancel.js           #工具类
├── core
│   ├── Axios.js              #Axios实例对象
│   ├── InterceptorManager.js #拦截器控制器
│   ├── README.md
│   ├── buildFullPath.js      #拼接请求的url、baseURL
│   ├── createError.js        #创建异常信息类工具
│   ├── dispatchRequest.js    #默认的拦截器（分发完全请求的拦截器）
│   ├── enhanceError.js       #异常信息类实体
│   ├── mergeConfig.js        #合并配置文件（用户设置的和默认的）
│   ├── settle.js             #根据http-code值来resolve/reject状态
│   └── transformData.js      #转换请求或相应的数据的工具类
├── defaults.js               #默认配置类
├── helpers/                  #一些辅助方法
└── utils.js                  #通用的工具类

各个类的主要功能，这里已经标注出来了，其核心模块主要有两个，一个是adapters 实际请求的发出的模块，另外一个就是core里面实现了一个请求从创建到完成的整个流程控制。adapters模块是对XMLHttpRequest的包装，这里不作过多的概述（其方法细节的实现），主要还是看下core里的做了哪些事情。

首先，我们要从源码的角度来看看一个请求是如何被发出的，下面以get请求发出到收到响应为例（axios.get）。

我们在项目使用axios时，通常是  import Axios from "axios" ，别看简单的这一句导包，他里面可做了好多事：

从axios.js这个入口文件，我们看到其创建了一个axios实例，并添加了一些方法。其关键方是在createInstance()：

function createInstance(defaultConfig) {
  // 创建一个Axios实例，这里理解成包装了请求方法的一个对象
  var context = new Axios(defaultConfig);


  // 为request方法bind上Axios，一个包装的wrap方法：
  // 可以简单理解成创建了一个对象。之所以这样创建为了方便能 
  // axios('https://m.zz.cn/a')这样用
  var instance = bind(Axios.prototype.request, context);


  // 把 Axios.prototype 上的方法拓展到instance上
  utils.extend(instance, Axios.prototype, context);


  // 把context中的defaults、interceptors拓展到instance实例中
  utils.extend(instance, context);


  return instance;
}

导包成功后，接着调用请求方法，像这样（还有其他的方式）：

axios
  .get(URL, {
    params: {
      zz: 'fe'
    }
  })
  .then(successFun, failureFun)
  .catch(erorFun);

调用的get方法其实是new Axios()中封装的方法，其最终会调到Axios.prototype.request指向的函数中（这才是所有请求方法调用的合并体）：

Axios.prototype.request = function request(config) {
  ...
  // 合并配置参数
  config = mergeConfig(this.defaults, config);


  // 如果没指定请求方式，默认get
  if (config.method) {
    config.method = config.method.toLowerCase();
  } else if (this.defaults.method) {
    config.method = this.defaults.method.toLowerCase();
  } else {
    config.method = 'get';
  }
  // Hook up interceptors middleware
  // ★★★ 这一块是axios的核心部分 ★★★ 
  // 其做的事情是：通过Promise把整个请求、拦截器处理封装到一条链上，按顺序调用
  // 这其中就包括最重要的一环：实际请求发送者：dispatchRequest
  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);
  });
  // 通过promise.then产生关联
  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }
  
  return promise;
};

这里面巧妙之处创建了一个请求处理链 china，在通过了Promise.resolve()创建一个promise对象，然后通过promise.then()把请求链串起来。

这种设计在设计模式上叫做：责任链模式（Chain of Responsibility），允许你将发出的请求沿着处理者链进行发送， 收到请求后， 每个处理者均可对请求进行处理， 或将其传递给链上的下个处理者。

上面这张网图比较形象的比喻责任链模式。

我们在回到axios上，看他这一条链是怎样的：

上面代码区里提到这个请求链中有个默认添加的重要的一环dispatchRequest，他会根据不同的平台（其实在new Axios()时已经确定使用哪个adapter了）来发出网络请求，并承担了对请求前后的数据包装工作。

function getDefaultAdapter() {
  var adapter;
  if (typeof XMLHttpRequest !== 'undefined') {
    // For browsers use XHR adapter
    adapter = require('./adapters/xhr');
  } else if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
    // For node use HTTP adapter
    adapter = require('./adapters/http');
  }
  return adapter;
}

接下来就是对后续拦截器的调用了（链中dispatchRequest 之前的是RequestInterceptor，之后的叫ResponseInterceptor），最终promise会回调到业务发起请求的地方。

最后，我们回头再捋一下这整个请求过程，他大致长这样：

后续

得益于axios中adapter的设计，后续如果我们有其他的平台的网络请求（eg.小程序），我们只需要实现对应端请求的adapter，就可以像平常一样使用了，抹平了各端的差异。

责任链模式，这种设计模式在封装网络库的时候非常实用，在Android/Java上知名的一个请求库OkHttp，其也使用了责任链模式。大家以后有机会写网络库的时候也可以参考下。

这篇文章没有过多的去细说实现细节，只从整体上讲了其实现框架，后续大家可以顺着整体框架自己去细读源码。