面试官：你了解Axios的原理吗？有看过它的源码吗？

╰+哭是因爲堅強的太久メ 2022-12-31 13:27 192阅读 0赞

![format_png][]

## 一、axios的使用 ##

关于`axios`的基本使用，上篇文章已经有所涉及，这里再稍微回顾下：

**发送请求**

import axios from 'axios';
    
    axios(config) // 直接传入配置
    axios(url[, config]) // 传入url和配置
    axios[method](url[, option]) // 直接调用请求方式方法，传入url和配置
    axios[method](url[, data[, option]]) // 直接调用请求方式方法，传入data、url和配置
    axios.request(option) // 调用 request 方法
    
    const axiosInstance = axios.create(config)
    // axiosInstance 也具有以上 axios 的能力
    
    axios.all([axiosInstance1, axiosInstance2]).then(axios.spread(response1, response2))
    // 调用 all 和传入 spread 回调

**请求拦截器**

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);
    });

**取消请求**

// 方式一
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    
    axios.get('xxxx', {
      cancelToken: source.token
    })
    // 取消请求 (请求原因是可选的)
    source.cancel('主动取消请求');
    
    // 方式二
    const CancelToken = axios.CancelToken;
    let cancel;
    
    axios.get('xxxx', {
      cancelToken: new CancelToken(function executor(c) {
        cancel = c;
      })
    });
    cancel('主动取消请求');

## 二、实现一个简易版axios ##

构建一个`Axios`构造函数，核心代码为`request`

class Axios {
        constructor() {
    
        }
    
        request(config) {
            return new Promise(resolve => {
                const {url = '', method = 'get', data = {}} = config;
                // 发送ajax请求
                const xhr = new XMLHttpRequest();
                xhr.open(method, url, true);
                xhr.onload = function() {
                    console.log(xhr.responseText)
                    resolve(xhr.responseText);
                }
                xhr.send(data);
            })
        }
    }

导出`axios`实例

// 最终导出axios的方法，即实例的request方法
    function CreateAxiosFn() {
        let axios = new Axios();
        let req = axios.request.bind(axios);
        return req;
    }
    
    // 得到最后的全局变量axios
    let axios = CreateAxiosFn();

上述就已经能够实现`axios({ })`这种方式的请求

下面是来实现下`axios.method()`这种形式的请求

// 定义get,post...方法，挂在到Axios原型上
    const methodsArr = ['get', 'delete', 'head', 'options', 'put', 'patch', 'post'];
    methodsArr.forEach(met => {
        Axios.prototype[met] = function() {
            console.log('执行'+met+'方法');
            // 处理单个方法
            if (['get', 'delete', 'head', 'options'].includes(met)) { // 2个参数(url[, config])
                return this.request({
                    method: met,
                    url: arguments[0],
                    ...arguments[1] || {}
                })
            } else { // 3个参数(url[,data[,config]])
                return this.request({
                    method: met,
                    url: arguments[0],
                    data: arguments[1] || {},
                    ...arguments[2] || {}
                })
            }
    
        }
    })

将`Axios.prototype`上的方法搬运到`request`上

首先实现个工具类，实现将`b`方法混入到`a`，并且修改`this`指向

const utils = {
      extend(a,b, context) {
        for(let key in b) {
          if (b.hasOwnProperty(key)) {
            if (typeof b[key] === 'function') {
              a[key] = b[key].bind(context);
            } else {
              a[key] = b[key]
            }
          }
          
        }
      }
    }

修改导出的方法

function CreateAxiosFn() {
      let axios = new Axios();
      
      let req = axios.request.bind(axios);
      // 增加代码
      utils.extend(req, Axios.prototype, axios)
      
      return req;
    }

构建拦截器的构造函数

class InterceptorsManage {
      constructor() {
        this.handlers = [];
      }
    
      use(fullfield, rejected) {
        this.handlers.push({
          fullfield,
          rejected
        })
      }
    }

实现`axios.interceptors.response.use`和`axios.interceptors.request.use`

class Axios {
        constructor() {
            // 新增代码
            this.interceptors = {
                request: new InterceptorsManage,
                response: new InterceptorsManage
            }
        }
    
        request(config) {
       ...
        }
    }

执行语句`axios.interceptors.response.use`和`axios.interceptors.request.use`的时候，实现获取`axios`实例上的`interceptors`对象，然后再获取`response`或`request`拦截器，再执行对应的拦截器的`use`方法

把`Axios`上的方法和属性搬到`request`过去

function CreateAxiosFn() {
      let axios = new Axios();
      
      let req = axios.request.bind(axios);
      // 混入方法， 处理axios的request方法，使之拥有get,post...方法
      utils.extend(req, Axios.prototype, axios)
      // 新增代码
      utils.extend(req, axios)
      return req;
    }

现在`request`也有了`interceptors`对象，在发送请求的时候，会先获取`request`拦截器的`handlers`的方法来执行

首先将执行`ajax`的请求封装成一个方法

request(config) {
        this.sendAjax(config)
    }
    sendAjax(config){
        return new Promise(resolve => {
            const {url = '', method = 'get', data = {}} = config;
            // 发送ajax请求
            console.log(config);
            const xhr = new XMLHttpRequest();
            xhr.open(method, url, true);
            xhr.onload = function() {
                console.log(xhr.responseText)
                resolve(xhr.responseText);
            };
            xhr.send(data);
        })
    }

获得`handlers`中的回调

request(config) {
        // 拦截器和请求组装队列
        let chain = [this.sendAjax.bind(this), undefined] // 成对出现的，失败回调暂时不处理
    
        // 请求拦截
        this.interceptors.request.handlers.forEach(interceptor => {
            chain.unshift(interceptor.fullfield, interceptor.rejected)
        })
    
        // 响应拦截
        this.interceptors.response.handlers.forEach(interceptor => {
            chain.push(interceptor.fullfield, interceptor.rejected)
        })
    
        // 执行队列，每次执行一对，并给promise赋最新的值
        let promise = Promise.resolve(config);
        while(chain.length > 0) {
            promise = promise.then(chain.shift(), chain.shift())
        }
        return promise;
    }

`chains`大概是`['fulfilled1','reject1','fulfilled2','reject2','this.sendAjax','undefined','fulfilled2','reject2','fulfilled1','reject1']`这种形式

这样就能够成功实现一个简易版`axios`

## 三、源码分析 ##

首先看看目录结构

![format_png 1][]

`axios`发送请求有很多实现的方法，实现入口文件为`axios.js`

function createInstance(defaultConfig) {
      var context = new Axios(defaultConfig);
    
      // instance指向了request方法，且上下文指向context，所以可以直接以 instance(option) 方式调用 
      // Axios.prototype.request 内对第一个参数的数据类型判断，使我们能够以 instance(url, option) 方式调用
      var instance = bind(Axios.prototype.request, context);
    
      // 把Axios.prototype上的方法扩展到instance对象上，
      // 并指定上下文为context，这样执行Axios原型链上的方法时，this会指向context
      utils.extend(instance, Axios.prototype, context);
    
      // Copy context to instance
      // 把context对象上的自身属性和方法扩展到instance上
      // 注：因为extend内部使用的forEach方法对对象做for in 遍历时，只遍历对象本身的属性，而不会遍历原型链上的属性
      // 这样，instance 就有了  defaults、interceptors 属性。
      utils.extend(instance, context);
      return instance;
    }
    
    // Create the default instance to be exported 创建一个由默认配置生成的axios实例
    var axios = createInstance(defaults);
    
    // Factory for creating new instances 扩展axios.create工厂函数，内部也是 createInstance
    axios.create = function create(instanceConfig) {
      return createInstance(mergeConfig(axios.defaults, instanceConfig));
    };
    
    // Expose all/spread
    axios.all = function all(promises) {
      return Promise.all(promises);
    };
    
    axios.spread = function spread(callback) {
      return function wrap(arr) {
        return callback.apply(null, arr);
      };
    };
    module.exports = axios;

主要核心是 `Axios.prototype.request`，各种请求方式的调用实现都是在 `request` 内部实现的， 简单看下 `request` 的逻辑

Axios.prototype.request = function request(config) {
      // Allow for axios('example/url'[, config]) a la fetch API
      // 判断 config 参数是否是 字符串，如果是则认为第一个参数是 URL，第二个参数是真正的config
      if (typeof config === 'string') {
        config = arguments[1] || {};
        // 把 url 放置到 config 对象中，便于之后的 mergeConfig
        config.url = arguments[0];
      } else {
        // 如果 config 参数是否是 字符串，则整体都当做config
        config = config || {};
      }
      // 合并默认配置和传入的配置
      config = mergeConfig(this.defaults, config);
      // 设置请求方法
      config.method = config.method ? config.method.toLowerCase() : 'get';
      /*
        something... 此部分会在后续拦截器单独讲述
      */
    };
    
    // 在 Axios 原型上挂载 'delete', 'get', 'head', 'options' 且不传参的请求方法，实现内部也是 request
    utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
      Axios.prototype[method] = function(url, config) {
        return this.request(utils.merge(config || {}, {
          method: method,
          url: url
        }));
      };
    });
    
    // 在 Axios 原型上挂载 'post', 'put', 'patch' 且传参的请求方法，实现内部同样也是 request
    utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
      Axios.prototype[method] = function(url, data, config) {
        return this.request(utils.merge(config || {}, {
          method: method,
          url: url,
          data: data
        }));
      };
    });

`request`入口参数为`config`，可以说`config`贯彻了`axios`的一生

`axios` 中的 `config`主要分布在这几个地方：

*  默认配置 `defaults.js`
 *  `config.method`默认为 `get`
 *  调用 `createInstance` 方法创建 `axios`实例，传入的`config`
 *  直接或间接调用 `request` 方法，传入的 `config`

// axios.js
    // 创建一个由默认配置生成的axios实例
    var axios = createInstance(defaults);
    
    // 扩展axios.create工厂函数，内部也是 createInstance
    axios.create = function create(instanceConfig) {
      return createInstance(mergeConfig(axios.defaults, instanceConfig));
    };
    
    // Axios.js
    // 合并默认配置和传入的配置
    config = mergeConfig(this.defaults, config);
    // 设置请求方法
    config.method = config.method ? config.method.toLowerCase() : 'get';

从源码中，可以看到优先级：默认配置对象`default` < `method:get` < `Axios`的实例属性`this.default` < `request`参数

下面重点看看`request`方法

Axios.prototype.request = function request(config) {
      /*
        先是 mergeConfig ... 等，不再阐述
      */
      // Hook up interceptors middleware 创建拦截器链. dispatchRequest 是重中之重，后续重点
      var chain = [dispatchRequest, undefined];
    
      // push各个拦截器方法 注意：interceptor.fulfilled 或 interceptor.rejected 是可能为undefined
      this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
        // 请求拦截器逆序 注意此处的 forEach 是自定义的拦截器的forEach方法
        chain.unshift(interceptor.fulfilled, interceptor.rejected);
      });
    
      this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
        // 响应拦截器顺序 注意此处的 forEach 是自定义的拦截器的forEach方法
        chain.push(interceptor.fulfilled, interceptor.rejected);
      });
    
      // 初始化一个promise对象，状态为resolved，接收到的参数为已经处理合并过的config对象
      var promise = Promise.resolve(config);
    
      // 循环拦截器的链
      while (chain.length) {
        promise = promise.then(chain.shift(), chain.shift()); // 每一次向外弹出拦截器
      }
      // 返回 promise
      return promise;
    };

拦截器`interceptors`是在构建`axios`实例化的属性

function Axios(instanceConfig) {
      this.defaults = instanceConfig;
      this.interceptors = {
        request: new InterceptorManager(), // 请求拦截
        response: new InterceptorManager() // 响应拦截
      };
    }

`InterceptorManager`构造函数

// 拦截器的初始化 其实就是一组钩子函数
    function InterceptorManager() {
      this.handlers = [];
    }
    
    // 调用拦截器实例的use时就是往钩子函数中push方法
    InterceptorManager.prototype.use = function use(fulfilled, rejected) {
      this.handlers.push({
        fulfilled: fulfilled,
        rejected: rejected
      });
      return this.handlers.length - 1;
    };
    
    // 拦截器是可以取消的，根据use的时候返回的ID，把某一个拦截器方法置为null
    // 不能用 splice 或者 slice 的原因是 删除之后 id 就会变化，导致之后的顺序或者是操作不可控
    InterceptorManager.prototype.eject = function eject(id) {
      if (this.handlers[id]) {
        this.handlers[id] = null;
      }
    };
    
    // 这就是在 Axios的request方法中 中循环拦截器的方法 forEach 循环执行钩子函数
    InterceptorManager.prototype.forEach = function forEach(fn) {
      utils.forEach(this.handlers, function forEachHandler(h) {
        if (h !== null) {
          fn(h);
        }
      });
    }

请求拦截器方法是被 `unshift`到拦截器中，响应拦截器是被`push`到拦截器中的。最终它们会拼接上一个叫`dispatchRequest`的方法被后续的 `promise` 顺序执行

var utils = require('./../utils');
    var transformData = require('./transformData');
    var isCancel = require('../cancel/isCancel');
    var defaults = require('../defaults');
    var isAbsoluteURL = require('./../helpers/isAbsoluteURL');
    var combineURLs = require('./../helpers/combineURLs');
    
    // 判断请求是否已被取消，如果已经被取消，抛出已取消
    function throwIfCancellationRequested(config) {
      if (config.cancelToken) {
        config.cancelToken.throwIfRequested();
      }
    }
    
    module.exports = function dispatchRequest(config) {
      throwIfCancellationRequested(config);
    
      // 如果包含baseUrl, 并且不是config.url绝对路径，组合baseUrl以及config.url
      if (config.baseURL && !isAbsoluteURL(config.url)) {
        // 组合baseURL与url形成完整的请求路径
        config.url = combineURLs(config.baseURL, config.url);
      }
    
      config.headers = config.headers || {};
    
      // 使用/lib/defaults.js中的transformRequest方法，对config.headers和config.data进行格式化
      // 比如将headers中的Accept，Content-Type统一处理成大写
      // 比如如果请求正文是一个Object会格式化为JSON字符串，并添加application/json;charset=utf-8的Content-Type
      // 等一系列操作
      config.data = transformData(
        config.data,
        config.headers,
        config.transformRequest
      );
    
      // 合并不同配置的headers，config.headers的配置优先级更高
      config.headers = utils.merge(
        config.headers.common || {},
        config.headers[config.method] || {},
        config.headers || {}
      );
    
      // 删除headers中的method属性
      utils.forEach(
        ['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],
        function cleanHeaderConfig(method) {
          delete config.headers[method];
        }
      );
    
      // 如果config配置了adapter，使用config中配置adapter的替代默认的请求方法
      var adapter = config.adapter || defaults.adapter;
    
      // 使用adapter方法发起请求（adapter根据浏览器环境或者Node环境会有不同）
      return adapter(config).then(
        // 请求正确返回的回调
        function onAdapterResolution(response) {
          // 判断是否以及取消了请求，如果取消了请求抛出以取消
          throwIfCancellationRequested(config);
    
          // 使用/lib/defaults.js中的transformResponse方法，对服务器返回的数据进行格式化
          // 例如，使用JSON.parse对响应正文进行解析
          response.data = transformData(
            response.data,
            response.headers,
            config.transformResponse
          );
    
          return response;
        },
        // 请求失败的回调
        function onAdapterRejection(reason) {
          if (!isCancel(reason)) {
            throwIfCancellationRequested(config);
    
            if (reason && reason.response) {
              reason.response.data = transformData(
                reason.response.data,
                reason.response.headers,
                config.transformResponse
              );
            }
          }
          return Promise.reject(reason);
        }
      );
    };

再来看看`axios`是如何实现取消请求的，实现文件在`CancelToken.js`

function CancelToken(executor) {
      if (typeof executor !== 'function') {
        throw new TypeError('executor must be a function.');
      }
      // 在 CancelToken 上定义一个 pending 状态的 promise ，将 resolve 回调赋值给外部变量 resolvePromise
      var resolvePromise;
      this.promise = new Promise(function promiseExecutor(resolve) {
        resolvePromise = resolve;
      });
    
      var token = this;
      // 立即执行 传入的 executor函数，将真实的 cancel 方法通过参数传递出去。
      // 一旦调用就执行 resolvePromise 即前面的 promise 的 resolve，就更改promise的状态为 resolve。
      // 那么xhr中定义的 CancelToken.promise.then方法就会执行, 从而xhr内部会取消请求
      executor(function cancel(message) {
        // 判断请求是否已经取消过，避免多次执行
        if (token.reason) {
          return;
        }
        token.reason = new Cancel(message);
        resolvePromise(token.reason);
      });
    }
    
    CancelToken.source = function source() {
      // source 方法就是返回了一个 CancelToken 实例，与直接使用 new CancelToken 是一样的操作
      var cancel;
      var token = new CancelToken(function executor(c) {
        cancel = c;
      });
      // 返回创建的 CancelToken 实例以及取消方法
      return {
        token: token,
        cancel: cancel
      };
    };

实际上取消请求的操作是在 `xhr.js` 中也有响应的配合的

if (config.cancelToken) {
        config.cancelToken.promise.then(function onCanceled(cancel) {
            if (!request) {
                return;
            }
            // 取消请求
            request.abort();
            reject(cancel);
        });
    }

巧妙的地方在 `CancelToken`中 `executor` 函数，通过`resolve`函数的传递与执行，控制`promise`的状态

### 小结 ###

![format_png 2][]

## 参考文献 ##

*  https://juejin.cn/post/6856706569263677447\#heading-4
 *  https://juejin.cn/post/6844903907500490766
 *  https://github.com/axios/axios

面试官VUE系列总进度：25／33

[面试官：说说对observable的理解][observable]

[面试官：说说为什么要在列表组件中写 key，其作用是什么？][key]

[面试官：说说你对keep-alive的理解是什么？怎么缓存当前的组件？缓存后怎么更新？][keep-alive]

[面试官：Vue常用的修饰符有哪些?有什么应用场景?][Vue]

[面试官：你有写过自定义指令吗？自定义指令的应用场景有哪些？][Link 1]

[面试官：什么是虚拟DOM？如何实现一个虚拟DOM？][DOM_DOM]

[面试官：了解过vue中的diff算法吗？说说看][vue_diff]

[面试官：Vue项目中有封装过axios吗？怎么封装的？][Vue_axios]

篇副有限，扫下方二维码查看往期

![format_png 3][]

[format_png]: /images/20221120/824fad76aa344fa89028c5abd56a2ff6.png
[format_png 1]: /images/20221120/be2702e1bd054d9195a8fc6682b99fd4.png
[format_png 2]: /images/20221120/fcee494742bb4694bb8dc47529b2d178.png
[observable]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1a8cb6748be745c18710a9e5895b0d5885e938e00106da13ed9d77a1b9bc5866d8a6472&idx=1&mid=2247484414&scene=21&sn=a62897b3506dc7082ef3b4c9cb817e7b#wechat_redirect
[key]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c65ccb674f4a81c25aa5d80a7df95e83216f2360185783e9087e9b3c0e46f0daba85d15f&idx=1&mid=2247484426&scene=21&sn=41c9b6a3bd335f5cc23d7c636520da11#wechat_redirect
[keep-alive]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c648cb674f5efbdad8222de6cd607870e44d5870480a229bfeefd6a78c3ba3b9d372ab37&idx=1&mid=2247484446&scene=21&sn=80d5a4a15c88f4d6fd878095101601e8#wechat_redirect
[Vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c663cb674f756a3f270d8e017dd7a773a5933afa35f11356fe42b67afe836003207851d6&idx=1&mid=2247484469&scene=21&sn=921d55282359ac4a16c077bbe5946628#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c614cb674f02345c0fbb44bc26dcacead59259d8a539fcbba4581d8e94783e9c5ac06b7d&idx=1&mid=2247484482&scene=21&sn=9558721c92f56261200fcee26d86dbe1#wechat_redirect
[DOM_DOM]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c632cb674f2484fdf914d76fba55afcefca3b5adcbe6cf4b0c7fd36e29d0292e8cefceb5&idx=1&mid=2247484516&scene=21&sn=965a4ce32bf93adb9ed112922c5cb8f5#wechat_redirect
[vue_diff]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c623cb674f35ef6e46d8a2aa70d524ee3a4ae005bf6e77008c3ce2510dcdb4d7bbde2667&idx=1&mid=2247484533&scene=21&sn=0b21d608fa46145c5118e22fc33a5bcf#wechat_redirect
[Vue_axios]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6decb674fc8aed35ee8254fe7f8cfc398648fa643039b29e3f6dda7caf17ff83df2f28a&idx=1&mid=2247484552&scene=21&sn=e847305e8330a6817e8800820774e78b#wechat_redirect
[format_png 3]: /images/20221120/8edba3184a064c67b19f5443d70322ae.png