【源码共读】学习 axios 源码整体架构（II）

源码分析

跳转至Axios.js文件中

// 构造函数
constructor(instanceConfig) {
    this.defaults = instanceConfig
    // 创建对应的拦截器
    this.interceptors = {
        request: new InterceptorManager(),
        response: new InterceptorManager()
  }
}

那么，拦截器是怎么创建的呢

首先，我们来看下拦截器的用法
www.axios-http.cn/docs/interc…

// 添加请求拦截器
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);
});

移除拦截器，可以这样：

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

给自定义的 axios 实例添加拦截器。

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

可以看到，请求拦截器和响应拦截器都是使用axios.interceptors.xxx.use进行挂载

我们来看下源码实现

 'use strict'

import utils from './../utils.js'

class InterceptorManager {
    // 用一个数组来存储拦截器函数
    constructor() {
        this.handlers = []
  }

    /**
   * 添加一个新的拦截器到栈中
   *
   * @参数 {Function} Promise.then(fulfilled)回调函数
   * @参数 {Function} Promise.reject(rejected) 回调函数
   *
   * @return {Number} 返回ID 用来移除拦截器时使用
   *
   */
    use(fulfilled, rejected, options) {
        this.handlers.push({
            fulfilled,
            rejected,
            // 是否同步
            synchronous: options ? options.synchronous : false,
            // 运行时机
            runWhen: options ? options.runWhen : null
      })
        return this.handlers.length - 1
  }

    eject(id) {
        // 如果在handlers中找到对应的id，对应的位置置为空
        if (this.handlers[id]) {
            this.handlers[id] = null
      }
  }

    // 重置拦截器数组
    clear() {
        if (this.handlers) {
            this.handlers = []
      }
  }

    // 遍历拦截器数组，如果当前的位置为Null，则跳过，否则执行回调函数
    forEach(fn) {
        utils.forEach(this.handlers, function forEachHandler(h) {
            if (h !== null) {
                fn(h)
          }
      })
  }
}

export default InterceptorManager

尝试调试

在全局搜索new XMLHttpRequest并打上断点，点击页面中的Send Request，进入断点

0.点击触发onClick

2.创建axios

3.调用request，检查是否有拦截器* 如果存在拦截器，则先触发

4.执行完dispatchRequest后，调用适配器

5.用Promise包裹xhrRequest

所以这个流程是

点击触发`onClick`
创建axios
调用`request`，检查是否有拦截器
执行完`dispatchRequest`后，调用适配器
用`Promise`包裹`xhrRequest`

我们来看下request是怎么实现的

request

request(configOrUrl, config) {
    // 检查传入的url是否是string 类型
    if (typeof configOrUrl === 'string') {
        config = config || {}
        config.url = configOrUrl
  } else {
        config = configOrUrl || {}
  }

    // 合并默认参数和用户定义的参数
    config = mergeConfig(this.defaults, config)

    const { transitional, paramsSerializer, headers } = config

    // config 对象格式化
    /*
  code...
  */

    // 设置发送请求的方式，默认是get
    // Set config.method
    config.method = (
        config.method ||
        this.defaults.method ||
        'get'
  ).toLowerCase()

    let contextHeaders

    // Flatten headers
    contextHeaders =
        headers && utils.merge(headers.common, headers[config.method])

    // 根据传入的请求方式，构建config中的method
    contextHeaders &&
        utils.forEach(
      ['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],
      (method) => {
            delete headers[method]
      }
  )

    config.headers = AxiosHeaders.concat(contextHeaders, headers)

    // filter out skipped interceptors
    // 收集所有的请求拦截器和响应拦截器
    const requestInterceptorChain = []
    let synchronousRequestInterceptors = true
    // 遍历请求拦截器，放到数组中
    this.interceptors.request.forEach()
    /*
  code...
  */
    // 遍历响应拦截器，放到数组中
    const responseInterceptorChain = []
    this.interceptors.response.forEach()
    /*
  code...
  */

    let promise
    let i = 0
    let len

    if (!synchronousRequestInterceptors) {
        const chain = [dispatchRequest.bind(this), undefined]
        // 将请求拦截器放到chain前面
        chain.unshift.apply(chain, requestInterceptorChain)
        // 将响应拦截器放到chain后面
        chain.push.apply(chain, responseInterceptorChain)
        len = chain.length
        // 生成promise实例
        promise = Promise.resolve(config)

        while (i < len) {
            // 将 fulfilled, rejected 取出
            // 链式调用
            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
      }
  }

    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
}

小结

根据上图所示，请求拦截器不断在前面unshift进去队列，响应拦截器不断在后面push进去队列，通过promise.then(chain[i++], chain[i++])的方式，从而实现Promise链式调用

dispatchRequest

这个函数处于chain队列的中间，我们来看下他做了什么事情

export default function dispatchRequest(config) {
    // 如果取消请求，抛出异常
    throwIfCancellationRequested(config)

    config.headers = AxiosHeaders.from(config.headers)

    // Transform request data
    // 请求的data 转换
    config.data = transformData.call(config, config.transformRequest)

    // 添加头部
    if (['post', 'put', 'patch'].indexOf(config.method) !== -1) {
        config.headers.setContentType('application/x-www-form-urlencoded', false)
  }
    // 配置适配器
    const adapter = adapters.getAdapter(config.adapter || defaults.adapter)

    return adapter(config).then(
        function onAdapterResolution(response) {
            // 取消相关
            throwIfCancellationRequested(config)

            // Transform response data
            // 响应数据转换
            response.data = transformData.call(
                config,
                config.transformResponse,
                response
          )
            // 处理响应的header
            response.headers = AxiosHeaders.from(response.headers)

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

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

            return Promise.reject(reason)
      }
  )
}

小结

这个函数主要做了几件事情

处理取消请求，抛出异常
处理config.header
根据请求的方法处理请求头
对请求和响应的头部和响应数据进行格式化
返回适配器adapter.then处理后的Promise实例

throwIfCancellationRequested

function throwIfCancellationRequested(config) {
    // 文档中已不推荐使用
    if (config.cancelToken) {
        config.cancelToken.throwIfRequested()
  }// signal.aborted 来取消操作
    if (config.signal && config.signal.aborted) {
        // 抛出错误，外面的catch进行捕捉
        // return Promise.reject(reason)
        throw new CanceledError(null, config)
  }
}

getAdapter

接下来，就是到适配器的实现。

适配器是什么呢，适配器相当于一个转换头，出境旅游的时候，插座可能是英标，欧标等，与我们国标的插头是不一致的，国内的电器设备无法使用，这个时候需要一个**转换插头**，这个就是适配器。

// adapters.js
const knownAdapters = {
    http: httpAdapter,
    xhr: xhrAdapter
}
export default {
    getAdapter: (adapters) => {
        adapters = utils.isArray(adapters) ? adapters : [adapters];

        const {length} = adapters;
        let nameOrAdapter;
        let adapter;
        // 判断adapter是否定义或者是否是http/xhr请求
        for (let i = 0; i < length; i++) {
            nameOrAdapter = adapters[i];
            if((adapter = utils.isString(nameOrAdapter) ? knownAdapters[nameOrAdapter.toLowerCase()] : nameOrAdapter)) {
                break;
          }
      }
        //如果adapter校验不通过，抛出错误信息
        if (!adapter) {
            // 省略代码...
      }

        if (!utils.isFunction(adapter)) {
            // 省略代码...
      }

        return adapter;
  },
    adapters: knownAdapters
}

总结

我们分析了axios的核心流程，可以知道以下几点：

拦截器是怎么实现链式调用并分别加载到合适的位置中
自定义的适配器怎么通过配置加入到axios中
axios怎么实现取消功能
request中是怎么去收集和处理拦截器的

通过我们的深入了解，我们可以回答这些面试问题

juejin.cn/post/684490…

0.为什么 axios 既可以当函数调用，也可以当对象使用？* axios本质上是函数，拓展了一些别名的方法，比如get(),post()等方法，本质上是调用了Axios.prototype.request函数，通过apply的形式将Axios.prototype.request赋值给axios

2.简述 axios 调用流程。* 实际上是调用Axios.prototype.request函数，内部通过Promise.then()实现链式调用，实际的请求在dispatchRequest中派发

3.有用过拦截器吗？原理是怎样的？* 拦截器通过axios.interceptors.request.use来添加请求拦截器和响应拦截器函数，先用两个数组分别收集请求拦截器和响应拦截器，然后在内部循环分别添加到两端。* 如果需要移除拦截器，可以使用eject方法移除

4.有使用axios的取消功能吗？是怎么实现的？* axios的取消功能通过config配置cancelToken(弃用)或者signal来控制，如果传入了cancelToken(弃用)或者signal，则抛出异常，使流程走到Promise.rejected

5.为什么支持浏览器中发送请求也支持node发送请求？* axios内部默认支持http，xhr请求的适配器，可以根据当前的环境去适配不同的请求，也可以自定义适配器来满足更多的场景需求。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
【源码共读】学习 axios 源码整体架构（II）
有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：
【源码共读】学习 axios 源码整体架构（II）

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取

秒客网

【源码共读】学习 axios 源码整体架构（II）

源码分析

尝试调试

request

小结

dispatchRequest

小结

throwIfCancellationRequested

getAdapter

总结

最后

相关文章

【源码共读】学习 axios 源码整体架构 （II）

源码分析

尝试调试

request

小结

dispatchRequest

小结

throwIfCancellationRequested

getAdapter

总结

最后

相关文章

【源码共读】学习 axios 源码整体架构（II）