--- highlight: agate theme: smartblue --- axios

## 前言相信大家在开发过程中，都使用过 `axios` 来发送网络请求，那在发送一个网络请求的时候，`axios` 为我们做了哪些事情呢？本文主要以发送 `get` 请求为例子，来深入解析一下 `axios` 的源码。当然了，本文不会解析 `axios` 所有功能的实现，只会涉及到一些日常开发中比较常用的几个功能： 1. 发送 `get` 请求的两种方式，`axios({method: 'get', url: '/api'})`（`axios('/api', {method: 'get'})`）和 `axios.get('/api')`的实现。 2. 请求拦截器和响应拦截器的实现。 3. 取消请求的实现 ## 源码准备我们先从 [`axios` 的 GitHub 仓库](https://github.com/axios/axios) 中克隆源码到本地，接着在终端运行命令 `npm install` 安装依赖，打开 `package.json`，找到 `main` 字段： package.json of axios

我们可以得知 `axios` 的入口文件是根目录下的 `index.js`，打开 `index.js` 文件，发现它引入了 `lib` 目录下的 `axios.js` 文件： index.js of axios

所以，源码开始的地方就是 `lib` 目录下的 `axios.js` 文件。接下来就开始在源码中的海洋里开始畅游啦\~ ## 源码解析在 `lib/axios.js` 文件中，第三行代码和第四行代码中分别引入了 `utils.js` 文件和 `./helpers/bind.js` 文件，`utils.js` 文件里面包含了 51 个工具类的函数，`./helpers/bind.js` 文件是对 `Function.prototype.bind()` 方法的实现，下面来逐一解析本文将会用到的 `utils` 工具函数和 `Function.prototype.bind()` 的实现。 ### Function.prototype.bind() 方法的实现函数的 `bind()` 方法返回的是一个新函数，该函数的 `this` 指向是 `bind()` 方法传入的第一个参数，`./helpers/bind.js` 文件代码实现其实就五行，主要是通过函数的 `apply()` 方法实现。 ```js export default function bind(fn, thisArg) { return function wrap() { return fn.apply(thisArg, arguments); }; } ``` 这里实现的 `bind` 函数和函数的 `bind()` 方法的调用方式有点不同，`bind` 函数的调用方式就跟我们平时调用函数一样，只不过这里的第一个参数是要改变 `this` 指向的函数，第二个参数才是 `this` 指向，最后也是返回一个函数。 ### utils 工具函数 #### findKey `findKey` 函数用来查找对象上是否存在某个属性名的小写，如果存在，那么直接返回它，否则返回 `null`。 ```js const obj = {NaMe: 'jack'}; const originKey = findKey(obj, 'name'); console.log(originKey); // 'NaMe' ``` `findKey` 函数有两个参数： 1. 要查找属性名的对象 2. 属性名的小写返回值是对象上的属性名或者 `null`。代码实现如下： ```js function findKey(obj, key) { key = key.toLowerCase(); // 转换为小写 const keys = Object.keys(obj); // 获取对象的属性名 let i = keys.length; let _key; // 循环遍历查找是否存在某个属性名的小写和 key 一样 while (i-- > 0) { _key = keys[i]; if (key === _key.toLowerCase()) { return _key; } } return null; } ``` #### isContextDefined `isContextDefined` 函数用于判断一个对象是否定义了并且不是全局对象，比如在浏览器环境下： ```js isContextDefined(window); // false，因为 window 是全局对象 let obj = {}; isContextDefined(obj); // true ``` `isContextDefined` 函数的参数只有一个，那就是要判断的对象。代码实现： ```js const _global = (() => { if (typeof globalThis !== "undefined") return globalThis; return typeof self !== "undefined" ? self : (typeof window !== 'undefined' ? window : global) })(); const isContextDefined = (context) => !isUndefined(context) && context !== _global; ``` > [isUndefined](https://juejin.cn/post/7246777363256590393#heading-12) 在下文中讲解了实现原理。 #### isArray `isArray` 函数用于判断变量是否为数组 ```js isArray([]); // true isArray({}); // false ``` 代码实现： ```js const {isArray} = Array; ``` #### kindOf `kindOf` 函数用能够精确地获取所有变量的数据类型 ```js kindOf('a') // string kindOf(1) // number kindOf(true) // boolean kindOf([]) // array ``` 代码实现： ```js const { toString } = Object.prototype; const kindOf = (cache => thing => { const str = toString.call(thing); // cache对象用来缓存计算过的值 return cache[str] || (cache[str] = str.slice(8, -1).toLowerCase()); })(Object.create(null)); ``` 本质上，`kindOf` 函数是通过 `Object.prototype.toString.call()` 获取的变量类型。 #### kindOfTest 对 `kindOf` 函数的二次封装，用来创建判断某个变量是否为指定类型的函数。 ```js const isNumber = kindOfTest('Number'); isNumber(1) // true isNumber("1") // false ``` 代码实现： ```js const kindOfTest = (type) => { type = type.toLowerCase(); return (thing) => kindOf(thing) === type } ``` #### isPlainObject `isPlainObject` 函数用于判断变量是否为普通的对象。 ```js isPlainObject({}); // true isPlainObject(new Object()); // true isPlainObject(new Array()); // false ``` 代码实现： ```js const { getPrototypeOf } = Object; const isPlainObject = (val) => { if (kindOf(val) !== 'object') { return false; } // 获取变量的原型对象 const prototype = getPrototypeOf(val); return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in val) && !(Symbol.iterator in val); } ``` 主要的实现思路是通过对象的原型、`Symbol.toStringTag` 和 `Symbol.iterator` 不存在普通对象上的条件来做判断的。这里稍微注意一下，如果对象的原型是 `null` 的话，则是通过 `Object.create(null)` 方法创建的对象，也属于普通对象。 #### typeOfTest 用于判断某个变量的类型。接收一个参数，该参数是 `typeof` 的返回值，返回值是一个函数，该函数用来判断某个变量的类型是否是 `typeofTest` 函数传入的参数值。 ```js typeOfTest('string')('a') // true ``` 代码实现： ```js const typeOfTest = type => thing => typeof thing === type; ``` #### isUndefined 判断变量是否是 `undefined`。 ```js isUndefined(undefined); // true ``` 代码实现： ```js const isUndefined = typeOfTest('undefined'); ``` 主要是对 `typeofTest` 函数的二次封装。 #### isFunction 判断变量是否是函数类型。 ```js const noop = () => {} isFunction(noop) // true ``` 代码实现： ```js const isFunction = typeOfTest('function'); ``` 主要也是对 `typeofTest` 函数的二次封装。 #### forEach `forEach` 函数可以用来遍历数组和对象，在设计模式中称为迭代器模式。 ```js forEach({a: 1, b: 2, c: 3}, function(val, key, obj) { // 1, a, {a: 1, b: 2, c: 3} // 2, b, {a: 1, b: 2, c: 3} // 3, c, {a: 1, b: 2, c: 3} console.log(val, key, obj); }) forEach(['a', 'b', 'c'], function(val, index, arr) { // 'a', 0, [1, 2, 3] // 'b', 1, [1, 2, 3] // 'c', 2, [1, 2, 3] console.log(val, index, arr); }) ``` `forEach` 函数有两个必选参数和一个可选参数： 1. 第一个参数代表要遍历的对象或数组 2. 第二个参数遍历每一个属性或元素时调用的函数，该函数有三个参数，分别代表属性值或元素值，属性名或索引名，对象或数组本身。 3. 第三个可选参数是一个对象，其属性只有一个 — `allOwnKeys`，代表是否获取对象自身的所有属性（包括不可枚举的属性）。代码实现如下： ```js /** * 遍历一个数组或一个对象，遍历每个元素时，都会调用一个函数 * @param {Object|Array} obj 要遍历的对象 * @param {Function} fn 遍历每个属性或元素时调用的函数 * * @param {Boolean} [allOwnKeys] 是否获取对象自身的所有属性（包括不可枚举的属性） */ function forEach(obj, fn, {allOwnKeys = false} = {}) { if (obj === null || typeof obj === 'undefined') { return; } let i; // 索引 let l; // 长度 if (typeof obj !== 'object') { // 如果不是对象，就将它变为数组 obj = [obj]; } // 遍历每个属性或元素，并调用传入的回调函数 — fn if (isArray(obj)) { for (i = 0, l = obj.length; i < l; i++) { fn.call(null, obj[i], i, obj); } } else { // 获取对象的属性名 const keys = allOwnKeys ? Object.getOwnPropertyNames(obj) : Object.keys(obj); const len = keys.length; let key; for (i = 0; i < len; i++) { key = keys[i]; fn.call(null, obj[key], key, obj); } } } ``` 注意，如果传入的遍历对象是原始数据类型或者是函数类型，那么会将其放到一个数组中，再进行遍历。 #### extend 通过向对象 `a` 添加对象 `b` 的属性来扩展对象 `a`。 ```js const a = {name: 'jack'}; const b = {age: 18}; extend(a, b, null); console.log(a); // {name: 'jack', age: 18} ``` `extend` 函数有三个必选参数和一个可选参数： 1. 第一个参数是要扩展的对象。 2. 第二个参数是要从中添加属性到扩展对象的对象。 3. 第三个参数是 `this` 指向，用于改变给第二个参数对象中的方法的 `this` 指向。 4. 第四个可选参数和 `forEach` 的第三个可选参数的意义一样。代码实现： ```js /** * 通过向对象 a 添加对象 b 的属性来扩展对象 a。 * * @param {Object} a 要扩展的对象 * @param {Object} b 要从中添加属性到扩展对象的对象 * @param {Object} this 指向，用于改变给第二个参数对象中的方法的 this 指向 * * @param {Boolean} [allOwnKeys] 是否获取对象自身的所有属性（包括不可枚举的属性） * @returns {Object} 对象 a */ const extend = (a, b, thisArg, {allOwnKeys}= {}) => { forEach(b, (val, key) => { if (thisArg && isFunction(val)) { a[key] = bind(val, thisArg); } else { a[key] = val; } }, {allOwnKeys}); return a; } ``` 代码的实现思路其实就是遍历 `b` 对象，将 `b` 对象中属性值一一赋值给 `a` 对象，如果属性值是函数的话，就调用上文介绍到的 `bind` 函数来改变 `this` 指向。 #### merge `merge` 用来合并多个对象的属性。它的功能很像 `Object.assign()` 方法，区别在于，对于普通对象来说，`Object.assign()` 方法是浅合并，返回值是修改后的目标对象，而 `merge` 是深合并，返回值是新对象。 ```js const obj1 = { a: 0, b: { c: 0 } }; const obj2 = Object.assign({}, obj1); obj1.b.c = 3; console.log(obj2.b.c); // 3 const obj3 = { a: 0, b: { c: 0 } }; const obj4 = merge({}, obj3); obj3.b.c = 3; console.log(obj4.b.c); // 0 ``` 代码实现： ```js function merge(/* obj1, obj2, obj3, ... */) { const {caseless} = isContextDefined(this) && this || {}; // 是否忽略大小写 const result = {}; // 合并结果 const assignValue = (val, key) => { const targetKey = caseless && findKey(result, key) || key; if (isPlainObject(result[targetKey]) && isPlainObject(val)) { // 如果属性值都是普通对象的情况下，那么再次调用 merge 函数达到深合并的效果 result[targetKey] = merge(result[targetKey], val); } else if (isPlainObject(val)) { // 第一次合并的变量就是对象，也要调用 merge 函数进行深合并 result[targetKey] = merge({}, val); } else if (isArray(val)) { // 数组不会进行深合并，仅仅是通过 slice 方法进行浅合并 result[targetKey] = val.slice(); } else { // 其他对象或原始数据类型直接赋值 result[targetKey] = val; } } // 遍历每个对象来进行属性合并，后一个对象的属性会覆盖前一个对象的属性 for (let i = 0, l = arguments.length; i < l; i++) { arguments[i] && forEach(arguments[i], assignValue); } return result; } ``` 最核心的代码逻辑就是 `assignValue` 函数，里面的四个合并条件我也标明了注释。 ### axios 实例在熟悉以上 `axios` 的工具函数之后，我们就来看看 `lib/axios.js` 的第一段代码 — 创建 `axios` 实例。 ```js function createInstance(defaultConfig) { const context = new Axios(defaultConfig); // 省略代码... } // Create the default instance to be exported const axios = createInstance(defaults); ``` 通过调用 `createInstance(defaults)` 函数来创建一个 `axios` 实例，其中 `defaults` 表示 `axios` 的默认配置，比如 `transformRequest`、`transformResponse`、`timeout`、`xsrfCookieName`、`xsrfHeaderName`、`maxContentLength`、`maxBodyLength`、`validateStatus`、`headers` 等等属性的默认值。那么 `createInstance` 函数内部做了什么事情呢？首先，通过 `new` 操作符得出 `Axios` 类的对象，也就是 `const context = new Axios(defaultConfig);` 这一行代码的作用，那我们顺着来看看 `Axios` 类内部做了什么事情。 ```js // lib/core/Axios.js class Axios { constructor(instanceConfig) { this.defaults = instanceConfig; this.interceptors = { request: new InterceptorManager(), // 请求拦截器 response: new InterceptorManager() // 响应拦截器 }; } // 核心方法 request(configOrUrl, config) {/*...*/} // 省略代码... } // 省略代码... ``` 可见，`Axios` 类在 `constructor` 方法做了两件事： 1. 保存默认配置 2. 初始化请求拦截器和响应拦截器（下文会解析如何实现拦截器） `Axios` 类还有个 `request` 公共方法，它是 `axios` 库最核心的方法，它会在发送请求之前做一些预处理，以及用来发送请求，也就是说，不管发送任何类型的请求，最后都会调用 `request` 方法。这个方法会在下文进行详细的解析，目前我们对它有一个大概的了解就行。在 `Axios` 类所处的文件中，你还会发现以下这两段代码： ```js // lib/core/Axios.js utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) { Axios.prototype[method] = function(url, config) { return this.request(mergeConfig(config || {}, { method, url, data: (config || {}).data })); }; }); utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) { function generateHTTPMethod(isForm) { return function httpMethod(url, data, config) { return this.request(mergeConfig(config || {}, { method, headers: isForm ? { 'Content-Type': 'multipart/form-data' } : {}, url, data })); }; } Axios.prototype[method] = generateHTTPMethod(); // 省略代码... }); ``` `mergeConfig` 函数是用来合并两个配置对象用的，其代码实现位于 `lib/core/mergeConfig.js` 中，在这里就不重点解析了。它其实是对 `utils` 中 `merge` 函数的扩展，在设计模式上称为**装饰器模式**，在不改变 `merge` 函数的基础上，通过对其进行包装拓展，使得 `mergeConfig` 函数可以动态具有更多功能。上述这两段代码其实就干了一件事：在 `Axios` 类的原型对象上添加 `delete`，`get`，`head`，`options`，`post`，`put`，`patch` 方法，并且在内部就是执行了 `Axios` 类的 `request` 方法。在 `Axios` 类的原型对象上添加的这些函数为 `axios.get()` 这种请求方式打下了基石。得到 `Axios` 类的对象之后，我们再来看看 `createInstance` 函数的下一步做了什么： ```js function createInstance(defaultConfig) { const context = new Axios(defaultConfig); const instance = bind(Axios.prototype.request, context); // 省略代码... return instance; } ``` 通过 `bind` 函数将 `Axios` 类中的 `request` 方法赋值给 `instance` 变量函数，也就是说调用 `instance` 函数相当于调用 `Axios` 类中的 `request` 方法，并且 `instance` 函数的 `this` 指向是上一次得出的 `Axios` 类实例对象。`createInstance` 函数最终的返回值就是这个`instance` 函数。也就是说 `axios` 其实是一个函数而不是一个对象。之前说过，无论发送什么类型的请求，最终都会调用 `request` 方法，所以，这就是为什么在[官方文档](https://www.axios-http.cn/docs/api_intro)中可以通过 `axios({method: 'get', url: '/api'})`（`axios( '/api', {method: 'get'})`）这种方式发送请求的原因。那 `axios.get('/api')` 这种方式又是怎么实现的呢？别急，我们往下看。 ```js function createInstance(defaultConfig) { const context = new Axios(defaultConfig); const instance = bind(Axios.prototype.request, context); utils.extend(instance, Axios.prototype, context, {allOwnKeys: true}); // 省略代码... return instance; } ``` 通过 `utils.extend()` 方法将 `Axios.prototype` 对象上的属性值扩展到 `instance` 函数上，结合之前对 `Axios` 类的分析，想想这时候 `Axios.prototype` 对象上有哪些属性？没错，除了`request` 方法，还有 `delete`，`get`，`head`，`options`，`post`，`put`，`patch` 属性方法。所以，`instance` 函数就有了这些属性方法，从而就可以使用 `axios.get('/api')` 这种方式发送请求。最后，再来简单说一下 `createInstance` 函数剩下的两段代码： ```js function createInstance(defaultConfig) { const context = new Axios(defaultConfig); const instance = bind(Axios.prototype.request, context); utils.extend(instance, Axios.prototype, context, {allOwnKeys: true}); utils.extend(instance, context, null, {allOwnKeys: true}); instance.create = function create(instanceConfig) { return createInstance(mergeConfig(defaultConfig, instanceConfig)); }; return instance; } ``` `createInstance` 函数里面还有最后两段代码，它们主要实现以下这两个功能： 1. 全局 `axios` 配置默认值 ```js axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; ``` 全局 `axios` 配置默认值的功能主要也是通过 `utils.extend()` 方法将 `Axios` 类中的实例对象 `context` 属性值扩展到 `instance` 函数上，这样就可以通过 `axios` 来全局配置默认值了。 2. 自定义实例 ```js // 创建实例时配置默认值 const instance = axios.create({ baseURL: 'https://api.example.com' }); ``` 自定义实例，则是通过给 `instance` 函数赋值上 `create` 方法，内部再次调用 `createInstance` 函数获得另一个 `instance` 函数。这种方式在设计模式上称为**工厂模式**，根据不同的输入返回不同的值。解析完 `axios` 实例都做了什么事情之后，我们接着来看看拦截器是如何实现的。 ### InterceptorManager 拦截器在分析拦截器的源码之前，我们先回顾一下拦截器的使用方法。 #### 添加拦截器 ```js // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } ); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error); } ); ``` #### 移除拦截器 ```js const myInterceptor = axios.interceptors.request.use(function () {/*...*/}); // eject 方法移除某个拦截器 axios.interceptors.request.eject(myInterceptor); ``` #### 源码解析在上文分析 `Axios` 类时，就提到了在 `constructor` 方法内初始化了请求和响应拦截器： ```js class Axios { constructor(instanceConfig) { this.defaults = instanceConfig; this.interceptors = { request: new InterceptorManager(), response: new InterceptorManager() }; } // 省略代码 } ``` 那现在来看看 `InterceptorManager` 的源码吧！源码位于 `lib/core/InterceptorManager.js` 文件中 ```js class InterceptorManager { constructor() { // 对象数组，每个对象存放了拦截器的 fulfilled 和 rejected 函数 this.handlers = []; } // 添加拦截器的 fulfilled 和 rejected 函数 use(fulfilled, rejected, options) { // 将 fulfilled 和 rejected 函数当作对象的属性存入 handlers 数组中 this.handlers.push({ fulfilled, rejected, // synchronous 属性表示拦截器函数是否同步执行 synchronous: options ? options.synchronous : false, // 省略代码... }); return this.handlers.length - 1; } // 移除某个拦截器 eject(id) { if (this.handlers[id]) { this.handlers[id] = null; } } // 清除拦截器 clear() { if (this.handlers) { this.handlers = []; } } // 遍历所有的拦截器 forEach(fn) { utils.forEach(this.handlers, function forEachHandler(h) { if (h !== null) { fn(h); } }); } } ``` 通过以上源码，我们得出以下信息： 1. 当使用 `axios.interceptors.request.use()` 或 `axios.interceptors.response.use()` 添加拦截器时，并没有执行拦截器，而是将它先存放到 `handlers` 数组上，那么拦截器什么时候执行呢？依然是在 `Axios` 类的 `request` 方法中执行，下文会详细地解析这个方法。 2. `axios.interceptors.request.use()` 或 `axios.interceptors.response.use()` 的返回值也不是什么拦截器的 `id`，而是这个拦截器在 `handlers` 数组中的索引。 3. 移除拦截器的逻辑是根据索引将 `handlers` 中的拦截器元素设置为 `null` 值，因此在使用 `forEach` 方法遍历 `handlers` 数组时，需要判断该拦截器元素不为空才执行后续的代码。那为什么不使用数组的 `splice` 方法来删除呢？因为这个方法的时间复杂的是 `O(n)`，`n` 为 `handlers` 数组的长度。而 `this.handlers[id] = null` 的时间复杂度是 `O(1)`，效率高太多了。 4. `handlers` 数组的拦截器元素中的 `synchronous` 属性表示拦截器函数是否同步执行，`true` 为同步执行，`false` 为异步执行，默认值为 `false`。 ### request 方法前面说过，`Axios` 类中的 `request` 方法是最核心的方法，任何类型的请求方式最终都是调用这个方法，比如 `axios.get('/api')` 或者 `axios({url: '/api', method: 'get'})`（`axios('/api', {method: 'get'})`），这时候我们就会有所疑问，那这些方式最终都会调用 `request` 方法，而传入参数的类型有可能是一个字符串，也有可能是一个普通对象，或者是一个字符串和一个对象，那怎么去做参数的兼容性处理呢？让我们来看看 `request` 的处理方式。 ```js request(configOrUrl, config) { if (typeof configOrUrl === 'string') { // 如果第一个参数是字符串 config = config || {}; config.url = configOrUrl; } else { // 如果第一个参数是对象 config = configOrUrl || {}; } // 省略代码... } ``` `request` 的处理方式非常巧妙，其逻辑是：无论如何，都要保持 `config` 变量的值为对象。如果第一个参数的类型为字符串，那么就将第一参数值当作 `config` 对象的 `url` 属性值，否则就把第一个参数值赋值给 `config` 变量。接下来，`request` 方法主要还对 `config` 对象做了以下预处理： 1. 合并默认配置和用户自定义配置 2. 保证 `config` 对象中 `method` 属性值是小写，如: `get`。 3. 将 `config` 对象中 `headers` 属性值的 `common` 属性和 `[config.method]` 属性合并为一个对象，扁平化这两个对象的值。 4. 删除 `config` 对象中 `headers` 属性值的 `delete`, `get`, `head`, `post`, `put`, `patch`, `common` 属性，因为它们在第三步的时候合并到一个新的对象上了。 ```js request(configOrUrl, config) { if (typeof configOrUrl === 'string') { // 如果第一个参数是字符串 config = config || {}; config.url = configOrUrl; } else { // 如果第一个参数是对象 config = configOrUrl || {}; } // 合并默认配置和自定义配置 config = mergeConfig(this.defaults, config); // 省略代码... // 保持 method 属性值为小写 config.method = (config.method || this.defaults.method || 'get').toLowerCase(); // 将 headers 中的 common 值和 [config.method] 合并为一个对象 const {headers} = config; let contextHeaders; contextHeaders = headers && utils.merge( headers.common, headers[config.method] ); // 删除 headers 中 'delete', 'get', 'head', 'post', 'put', 'patch', 'common' 属性 contextHeaders && utils.forEach( ['delete', 'get', 'head', 'post', 'put', 'patch', 'common'], (method) => { delete headers[method]; } ); // 合并头信息 config.headers = AxiosHeaders.concat(contextHeaders, headers); } ``` 处理好 `config` 对象的属性之后，那么接下来就到了如何执行拦截器的问题了。而在执行拦截器之前，`request` 方法会将请求拦截器的函数和响应拦截器的函数各保存到一个数组上。 ```js request(configOrUrl, config) { // 省略 config 预处理的代码 // 是否同步执行拦截器 let synchronousRequestInterceptors = true; // 保存请求拦截器的 fulfilled 函数和 rejected 函数 const requestInterceptorChain = []; // 遍历通过 use 方法添加的拦截器函数，并将这些函数加入到 requestInterceptorChain this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) { // 省略代码... synchronousRequestInterceptors = synchronousRequestInterceptors && interceptor.synchronous; requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected) }); // 保存响应拦截器的 fulfilled 函数和 rejected 函数 const responseInterceptorChain = []; this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) { responseInterceptorChain.push(interceptor.fulfilled, interceptor.rejected); }); } ``` 这里有两个需要注意的点： 1. `synchronousRequestInterceptors` 变量是用来控制拦截器是否同步执行的，默认拦截器是异步执行的（这在上文 `InterceptorManager` 拦截器源码解析中讲到过）。 2. `requestInterceptorChain` 数组中的请求拦截器处理函数的顺序是和用 `use` 方法添加的处理函数的顺序相反的，也就是说，最后的执行顺序和添加函数的顺序相反，比如： ```js axios.interceptors.request.use(function (config) { console.log("1"); return config; }, function (error) { console.log("1"); return Promise.reject(error); }); axios.interceptors.request.use(function (config) { console.log("2"); return config; }, function (error) { console.log("2"); return Promise.reject(error); }); // 先打印 2，再打印 1。 ``` 将拦截器的函数保存到数组之后，执行拦截器的逻辑就比较清晰了，无非就是遍历 `requestInterceptorChain` 和 `responseInterceptorChain` 两个数组，执行数组里的每一个元素函数，但执行拦截器的方式有两种，分别是：异步执行和同步执行。 ```js request(configOrUrl, config) { // 省略 config 预处理的代码 // 省略拦截器预处理的代码 let promise; let i = 0; let len; // 异步执行 if (!synchronousRequestInterceptors) { // dispatchRequest 函数是正式发送 xhr 请求的函数 const chain = [dispatchRequest.bind(this), undefined]; // 将请求拦截器放在 xhr 请求函数之前 chain.unshift.apply(chain, requestInterceptorChain); // 将响应拦截器放在 xhr 请求函数之后 chain.push.apply(chain, responseInterceptorChain); len = chain.length; promise = Promise.resolve(config); while (i < len) { // 通过 promise then 链的执行方式达到异步执行的效果 promise = promise.then(chain[i++], chain[i++]); } return promise; } // 同步执行 len = requestInterceptorChain.length; let newConfig = config; i = 0; // 同步执行请求拦截器 while (i < len) { const onFulfilled = requestInterceptorChain[i++]; const onRejected = requestInterceptorChain[i++]; try { newConfig = onFulfilled(newConfig); } catch (error) { onRejected.call(this, error); break; } } // 执行 xhr 请求 try { promise = dispatchRequest.call(this, newConfig); } catch (error) { return Promise.reject(error); } // 执行响应拦截器 i = 0; len = responseInterceptorChain.length; while (i < len) { promise = promise.then(responseInterceptorChain[i++], responseInterceptorChain[i++]); } return promise; } ``` 这里的 `dispatchRequest` 函数是用来发送 `xhr` 请求，返回 `Promise` 对象，可见它需要在请求拦截器之后和响应拦截器之前执行，`dispatchRequest` 函数会在下文进行解析。异步执行拦截器是通过 `Promise` 的 `then` 链形式来完成；而同步执行的情况下，是先直接遍历 `requestInterceptorChain` 数组，执行请求拦截器，然后再执行 `dispatchRequest` 函数发送 `xhr` 请求，最后仍然要通过 `Promise` 的 `then` 链形式来执行响应拦截器，因为 `dispatchRequest` 函数返回的是一个 `Promise` 对象。好了，以上就是 `request` 方法中的源码了。最后，简单总结一下 `request` 方法都做了什么： 1. 预处理 `config` 配置对象 — 对各种请求方式的传参类型做兼容性处理，确保 `method` 属性为小写值，处理头信息属性。 2. 将请求拦截器处理函数和响应拦截器处理函数各放在一个数组上。注意，请求拦截器的处理函数的执行顺序跟添加顺序是相反的。 3. 根据 `synchronousRequestInterceptors` 变量判断是同步执行拦截器还是异步执行拦截器，默认是异步执行。 ### dispatchRequest 根据上文我们知道了 `dispatchRequest` 函数是用来发送 `xhr` 请求，其源码位于 `lib/core/dispatchRequest.js` 文件。其实在 `dispatchRequest` 函数内，还执行了一个操作 — 取消请求，但这个会留到下文解析。除了取消请求，该函数主要做了以下这几件事： 1. 完善头信息字段 — `headers` 2. 执行 `transformRequest` 函数数组。`transformRequest` 允许在向服务器发送前，修改请求数据，只能用于 `put`, `post` 和 `patch` 这几个请求方法。 3. 设置 `Content-Type` 的默认值 4. 获取请求的方式，是发送浏览器的 `xhr` 请求还是 `Node.js` 环境中的 `http` 模块请求。 5. 发送请求，通过 `Promise` 对象的 `then` 方法接收响应信息，并执行 `transformResponse` 函数数组，它在通过 `axios({url: '/api'})` 函数或`axios.get({url: '/api'})` 方法的 `then` 方法获取响应数据之前会执行，允许修改响应数据。 ```js // 如果已经取消请求了，就抛出错误 function throwIfCancellationRequested(config) { if (config.cancelToken) { config.cancelToken.throwIfRequested(); } if (config.signal && config.signal.aborted) { throw new CanceledError(null, config); } } function dispatchRequest(config) { // 检查是否已经取消请求了 throwIfCancellationRequested(config); // 完善头信息字段 config.headers = AxiosHeaders.from(config.headers); // 执行 transformRequest 数组函数 config.data = transformData.call( config, config.transformRequest ); // 设置默认的 Content-Type if (['post', 'put', 'patch'].indexOf(config.method) !== -1) { config.headers.setContentType('application/x-www-form-urlencoded', false); } // 获取请求方式，当前是 xhr 请求，如果是 node 环境下，则是 http 模块请求 const adapter = adapters.getAdapter(config.adapter || defaults.adapter); // 发送请求，接收响应信息，执行 transformResponse 函数数组 return adapter(config).then(function onAdapterResolution(response) { // 检查是否已经取消请求了 throwIfCancellationRequested(config); // 执行 transformResponse 函数数组 response.data = transformData.call( config, config.transformResponse, response ); // 完善响应头信息 response.headers = AxiosHeaders.from(response.headers); return response; }, function onAdapterRejection(reason) { // 省略代码... return Promise.reject(reason); }); } ``` > 本文不会解析 `transformRequest` 和 `transformResponse` 的源码，感兴趣的朋友可以自行前往 `lib/defaults/index.js` 文件中阅读对应的源码。着重解析一下是如何根据代码的运行环境来获取请求方式的，也就是下面这一行代码中 `getAdapter` 方法的实现逻辑。 ```js const adapter = adapters.getAdapter(config.adapter || defaults.adapter); ``` 其中 `defaults.adapter` 的值是 `['xhr', 'http']`。`getAdapter` 方法的源码位于 `lib/adapters/adapters.js` 中，我们来看看它具体做了什么 ```js import httpAdapter from './http.js'; import xhrAdapter from './xhr.js'; // xhr 请求和 http 模块请求 const knownAdapters = { http: httpAdapter, xhr: xhrAdapter } // 省略代码 getAdapter: (adapters) => { adapters = utils.isArray(adapters) ? adapters : [adapters]; const {length} = adapters; let nameOrAdapter; let adapter; for (let i = 0; i < length; i++) { nameOrAdapter = adapters[i]; // 默认情况下，从 knownAdapters 对象中获取请求方式 if((adapter = utils.isString(nameOrAdapter) ? knownAdapters[nameOrAdapter.toLowerCase()] : nameOrAdapter)) { break; } } // 省略代码 return adapter; }, ``` 从源码上看，`axios` 默认内置了两种情况方式 — `xhr` 请求和 `http` 模块请求，`axios` 也允许用户自定义请求方式，通过配置对象中的 `adapter` 属性声明即可。那么假设在当前的浏览器环境下，如何获取这两者的其中一个请求方式呢？那就需要看看 `httpAdapter` 和 `xhrAdapter` 的源码是如何实现的了。它们的源码分别位于 `lib/adapters/http.js` 和 `lib/adapters/xhr.js`，由于本文是以浏览器环境的前提下为主来解析代码且 `httpAdapter` 的实现逻辑相对复杂，所以本文也不会进行解析，只需要知道它是怎么获取相应的请求方式就行。在 `lib/adapters/http.js` 中： ```js // 省略代码... const isHttpAdapterSupported = typeof process !== 'undefined' && utils.kindOf(process) === 'process'; export default isHttpAdapterSupported && function httpAdapter(config){/*...*/} ``` 可见是通过判断当前环境是否存在 `process` 变量来决定是否导出 `httpAdapter` 函数，当前假设的是浏览器环境，所以导出的 `false` 值。在 `lib/adapters/xhr.js` 中： ```js // 省略代码... const isXHRAdapterSupported = typeof XMLHttpRequest !== 'undefined'; export default isXHRAdapterSupported && function (config) {/*省略代码*/} ``` 通过判断当前环境是否存在 `XMLHttpRequest` 对象来决定是否导出 `xhrAdapter` 函数，当前假设是浏览器环境，所以导出的是 `xhrAdapter` 函数。所以，在 `lib/adapters/adapters.js` 中，`knownAdapters` 对象的值实际为： ```js const knownAdapters = { http: false, xhr: xhrAdapter } ``` 所以`getAdapter` 方法自然而然地也就获取到了 `xhr` 请求方式。`getAdapter` 方法在设计模式中称为**适配器模式**，将一个对象的接口（方法、属性）转化为用户需要的另一个接口，解决对象之间接口不兼容的问题。获取到 `xhr` 请求方式之后，那么接下来就要看看 `xhrAdapter` 函数是怎么发送 `xhr` 请求的了。 ### 取消请求与发送请求 #### 发送请求发送 `xhr` 请求的源代码位于 `lib/adapters/adapters.js`。我们仔细回想一下使用原生的 `XMLHttpRequest` 对象发送请求的步骤： 1. 创建 `XMLHttpRequest` 对象 ```js const xhr = new XMLHttpRequest(); ``` 2. 在这个对象上使用 `open` 方法创建一个 `HTTP` 请求，参数是请求方法、请求地址、是否异步和用户的认证信息。比如创建一个异步的 `get` 请求。 ```js xhr.open('get', '/api', true); ``` 3. 在正式发起请求前，我们可以通过 `setRequestHeader` 方法来为请求添加头信息；通过监听 `progress` 事件来获取接收数据的进度，或监听 `load` 事件来响应数据已接收完成。 ```js xhr.setRequestHeader('Connection', 'keep-alive'); xhr.addEventListener("load", function (e) { if(xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) } }); ``` 4. 最后调用 `send` 方法来向服务器发起请求，可以传入参数作为发送请求的数据体。 ```js xhr.send(); ``` 其实 `lib/adapters/xhr.js` 的源代码大致上就是围绕这四个步骤去做一些补充，包括设置超时时间，监听 `onloadend` 事件，监听 `onabort` 事件，监听 `onerror` 事件，监听 `ontimeout` 事件，取消请求等等。 ```js export default isXHRAdapterSupported && function (config) { return new Promise(function dispatchXhrRequest(resolve, reject) { let requestData = config.data; // 头信息 const requestHeaders = AxiosHeaders.from(config.headers).normalize(); // 请求期望的响应类型 const responseType = config.responseType; let onCanceled; // 服务器返回的数据接收完成后，移除所有取消请求函数 function done() { if (config.cancelToken) { config.cancelToken.unsubscribe(onCanceled); } if (config.signal) { config.signal.removeEventListener('abort', onCanceled); } } // 省略代码... // 创建 XMLHttpRequest 对象 let request = new XMLHttpRequest(); // 省略代码... // 获取完整的请求路径 const fullPath = buildFullPath(config.baseURL, config.url); // buildURL 函数将参数添加到请求路径上 request.open(config.method.toUpperCase(), buildURL(fullPath, config.params), true); // 设置超时时间 request.timeout = config.timeout; // 请求完成后会执行该函数 function onloadend() { if (!request) { return; } // 准备响应头 const responseHeaders = AxiosHeaders.from( 'getAllResponseHeaders' in request && request.getAllResponseHeaders() ); // 服务器返回的数据 const responseData = !responseType || responseType === 'text' || responseType === 'json' ? request.responseText : request.response; // 响应数据 const response = { data: responseData, status: request.status, statusText: request.statusText, headers: responseHeaders, config, request }; if (response.status === 200 || response.status === 304) { resolve(response); } else { // 返回错误信息 reject(new AxiosError('Request failed with status code ' + response.status)); } done(); // 清除请求对象 request = null; } if ('onloadend' in request) { // 如果 onloadend 事件存在 XMLHttpRequest 对象，就监听 onloadend 事件 request.onloadend = onloadend; } else { // 监听 onreadystatechange 事件 request.onreadystatechange = function handleLoad() { if (!request || request.readyState !== 4) { return; } // 省略代码... /** * 由于 readystate 事件在 onerror 事件和 ontimeout 事件之前执行， * 所以最终需要延迟执行 onloadend 函数。 */ setTimeout(onloadend); }; } // 监听 onabort 事件 request.onabort = function handleAbort() { if (!request) { return; } // 返回错误信息 reject(new AxiosError('Request aborted', AxiosError.ECONNABORTED, config, request)); // 清除请求对象 request = null; }; // 监听 onerror 事件 request.onerror = function handleError() { // 返回错误信息 reject(new AxiosError('Network Error', AxiosError.ERR_NETWORK, config, request)); // 清除请求对象 request = null; }; // 监听 ontimeout 事件 request.ontimeout = function handleTimeout() { let timeoutErrorMessage = config.timeout ? 'timeout of ' + config.timeout + 'ms exceeded' : 'timeout exceeded'; // 省略代码... // 返回错误信息 reject(new AxiosError(timeoutErrorMessage)); // 清除请求对象 request = null; }; // 如果请求体数据为空，移除 Content-Type 请求头信息字段 requestData === undefined && requestHeaders.setContentType(null); // 设置请求头信息 if ('setRequestHeader' in request) { utils.forEach(requestHeaders.toJSON(), function setRequestHeader(val, key) { request.setRequestHeader(key, val); }); } // 省略代码... // 取消请求 if (config.cancelToken || config.signal) { // 取消请求函数 onCanceled = cancel => { if (!request) { return; } // 如果取消请求对象不存在，返回错误信息 reject(!cancel || cancel.type ? new CanceledError(null, config, request) : cancel); // 取消 xhr 请求 request.abort(); request = null; }; // 添加 onCanceled 请求函数，onCanceled 函数的调用时机由外部决定 config.cancelToken && config.cancelToken.subscribe(onCanceled); if (config.signal) { // fetch API — AbortController 取消请求的方式 config.signal.aborted ? onCanceled() : config.signal.addEventListener('abort', onCanceled); } } // 省略代码... // 发送请求 request.send(requestData || null); }); } ``` 这里关于取消请求的逻辑会在下文马上解析，因为发送请求与取消请求有一定的关联关系，所以需要先在这里展示如何取消请求的逻辑。 #### 取消请求 `axios` 官方文档中说明了有两种方式可以取消请求，分别是 fetch API 方式 —`AbortController` 和 `CancelToken`。 ```js // AbortController const controller = new AbortController(); axios.get('/foo/bar', { signal: controller.signal }).then(function(response) { //... }); // 取消请求 controller.abort() ``` ```js // CancelToken const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/foo/bar', { cancelToken: source.token }).then(function(response) { //... }); // 取消请求 source.cancel('Operation canceled by the user.'); ``` `AbortController` 取消请求的方式在发送请求的源代码中表现得非常简单，只需要对配置对象中的 `signal` 属性监听 `abort` 事件即可。 ```js // lib/adapters/xhr.js // ... if (config.cancelToken || config.signal) { // 取消请求函数 onCanceled = cancel => { if (!request) { return; } // 如果取消请求对象不存在，返回错误信息 reject(!cancel || cancel.type ? new CanceledError(null, config, request) : cancel); // 取消 xhr 请求 request.abort(); request = null; }; // 省略代码... if (config.signal) { // 监听 abort 事件 config.signal.aborted ? onCanceled() : config.signal.addEventListener('abort', onCanceled); } } // ... ``` 如果 `signal` 属性已经是 `aborted` 状态，那么就直接调用 `onCanceled` 函数，否则，通过外部调用 `controller.abort()` 方法，触发 `abort` 事件调用 `onCanceled` 函数。如果最终因为某些原因，没有调用 `controller.abort()` 方法，那么当请求发送成功，并且响应数据接收完成时，会移除 `abort` 事件的监听。 ```js // lib/adapters/xhr.js // ... function done() { // 省略代码... // 移除 `abort` 事件的监听 if (config.signal) { config.signal.removeEventListener('abort', onCanceled); } } // ... ``` 而 `CancelToken` 的取消方式源代码稍微复杂一点，它主要运用到了设计模式中的**观察者模式**。 ```js class CancelToken { constructor(executor) { if (typeof executor !== 'function') { throw new TypeError('executor must be a function.'); } let resolvePromise; this.promise = new Promise(function promiseExecutor(resolve) { resolvePromise = resolve; }); const token = this; this.promise.then(cancel => { if (!token._listeners) return; let i = token._listeners.length; // 执行所有订阅者函数 while (i-- > 0) { token._listeners[i](cancel); } // 清除所有订阅者 token._listeners = null; }); // 省略代码 // cancel 回调函数用于通知所有订阅者 executor(function cancel(message, config, request) { if (token.reason) { // 如果取消信息不为空，说明已经取消过请求 return; } token.reason = new CanceledError(message, config, request); // 触发上文的 this.promise.then() 中的回调函数 resolvePromise(token.reason); }); } // 如果已经取消请求了，抛出错误 throwIfRequested() { if (this.reason) { throw this.reason; } } // 添加订阅者 subscribe(listener) { if (this.reason) { /** * 如果取消信息不为空，则说明已经取消过， * 应该立马通知订阅者，告诉它已经取消过请求了。 */ listener(this.reason); return; } if (this._listeners) { this._listeners.push(listener); } else { this._listeners = [listener]; } } // 移除订阅者 unsubscribe(listener) { if (!this._listeners) { return; } const index = this._listeners.indexOf(listener); if (index !== -1) { this._listeners.splice(index, 1); } } /** * 返回一个对象，里面包含了 CancelToken 类的实例对象 token * 和通知所有订阅者的函数 cancel */ static source() { let cancel; const token = new CancelToken(function executor(c) { cancel = c; }); return { token, cancel }; } } ``` 在发送请求的源代码中，实现了**添加订阅者**的步骤： ```js // lib/adapters/xhr.js // ... if (config.cancelToken || config.signal) { // 取消请求函数 onCanceled = cancel => { if (!request) { return; } // 如果取消请求对象不存在，返回错误信息 reject(!cancel || cancel.type ? new CanceledError(null, config, request) : cancel); // 取消 xhr 请求 request.abort(); request = null; }; // 添加订阅者 config.cancelToken && config.cancelToken.subscribe(onCanceled); // 省略代码... } // ... ``` 那什么时候通知所有订阅者呢？还记得一开始举的官方例子吧？其中的 `source.cancel('Operation canceled by the user.')` 就是用来通知所有订阅者的。之后就会执行 `request.abort()` 代码，中断 `xhr` 请求。同样地，如果最终因为某些原因，没有调用 `source.cancel('Operation canceled by the user.')` 方法，那么当请求发送成功，并且响应数据接收完成时，会移除订阅者。 ```js // lib/adapters/xhr.js // ... function done() { // 移除订阅者 if (config.cancelToken) { config.cancelToken.unsubscribe(onCanceled); } // 省略代码... } // ... ``` ## 总结 1. 无论是用 `axios(config)`还是用 `axios.get(url[, config])` 发送请求，其本质上都是在调用 `Axios` 类中的 `request` 方法，`request` 方法会对各种传参形式做一个统一处理。 2. 拦截器默认是异步执行的，如果想要同步执行，则要 `axios.interceptors.(request|response).use` 方法的第三个参数中设置 `{ synchronous: true }`。拦截器函数也是在 `Axios` 类中的 `request` 方法的执行。 3. 本质上，`axios` 就是 `xhr` 请求（浏览器环境下）或者 `http` 模块请求（`Node.js` 环境下），只不过在正式发送请求之前，做了大量的预处理工作。 4. 取消请求的方式分为两种：`AbortController` 和 `CancelToken`，现官方推荐用 `AbortController`。源代码实现上，`AbortController` 也比较简单明了，只需要监听 `abort` 事件即可；而 `CancelToken` 则是运用了设计模式中观察者模式的思想，通过调用外部的 `cancel` 方法来通知所有的订阅者，从而执行 `request.abort()` 方法，完成取消请求。 5. `axios` 中运用了大量的设计模式，比如本文提到过的迭代器模式、装饰器模式、适配器模式、工厂模式、观察者模式。如果想系统学习设计模式的话，推荐曾探老师的《[JavaScript设计模式与开发实践](https://book.douban.com/subject/26382780/)》。