如何实现请求与响应的拦截

Axios拦截器在项目中所扮演的角色是非常重要的，它可以拦截每一次的请求和响应，然后进行相应的处理。经阅读其源码，不禁被作者的神级思维所折服！简直是将Promise用到了极致！

1、声明一个用于拦截器管理的构造函数

 

// 声明拦截器管理构造函数
function InterceptorManager(){
    // 用于存放Axios拦截行为及数据请求的Promise链条
    this.handlers = [];
}
// 增加拦截器
InterceptorManager.prototype.use = function (fulfilled,rejected) {
    this.handlers.push({
        fulfilled,
        rejected
    })
}

2、Axios 构造函数中增加 interceptors

 

function Axios(instanceConfig){
    // defaults 属性为配置对象
    this.defaults = instanceConfig;
    // interceptors 属性用来设置请求和响应拦截器
    this.interceptors = {
        request: new InterceptorManager(),
        response: new InterceptorManager(),
    }
}

3、对之前封装好的 request 进行调整

 

Axios.prototype.request = function (config) {
    function dispatchRequest(){
        // 发送xhr请求……
    }
    // dispatchRequest 发送请求，undefined 用来补位
    var chain = [dispatchRequest, undefined];
    // 遍历实例对象的请求拦截器
    this.interceptors.request.handlers.forEach(interceptor=>{
        // 将请求拦截器压入数组的最前面
        chain.unshift(interceptor.fulfilled,interceptor.rejected)
    })
    // 遍历实例对象的响应拦截器
    this.interceptors.response.handlers.forEach(interceptor=>{
        // 将请求拦截器压入数组的最后面
        chain.push(interceptor.fulfilled,interceptor.rejected);
    })
    // 创建一个成功的 promise 且成功的值为合并后的请求配置
    let promise = Promise.resolve(config);

    // 如果链条长度不为 0
    while (chain.length){
        // 依次取出 chain 的回调函数, 并执行
        promise