关于javascript:axios拦截器执行流程分析

平时咱们发送 axios 申请可能会有申请拦挡或者响应拦挡，然而咱们 axios 申请拦挡和响应拦挡的执行顺是不统一的。

申请拦挡：axios 的申请拦挡会先执行最初指定的回调函数先执行，顺次向后面执行。
响应拦挡：axios 的响应拦挡会先执行最先指定的回调函数先执行，顺次向前面执行

以下代码为例

    
        axios.interceptors.request.use(config => {console.log(` 申请拦挡 1`);
            return config;
        });
        axios.interceptors.request.use(config => {
            // 在发送申请之前做些什么
            console.log(` 申请拦挡 2`);
            return config;
        });
 
        // 增加响应拦截器
        axios.interceptors.response.use(response => {
            // 对响应数据做点什么
            console.log(` 胜利的响应拦挡 1`);
            return response.data;
        });

        // 增加响应拦截器
        axios.interceptors.response.use(response => {
            // 对响应数据做点什么
            console.log(` 胜利的响应拦挡 2`);
            return response;
       });
        
        // 发送申请
        axios.get('/posts')
            .then(response => {console.log('胜利了');
            })

以上代码的打印后果程序为：

console.log( 申请拦挡 2 );
console.log( 申请拦挡 1 );
console.log( 胜利的响应拦挡 1 );
console.log( 胜利的响应拦挡 2 );
console.log( 胜利了 );

为什么申请拦挡 2 会在申请拦挡 1 后面执行呢？
因为 axios 将响应拦挡和申请拦挡都寄存在一个数组中

而 axios 开始发送申请，是每次从数组中删除两个回调函数来开始执行，只到数组为空则执行实现。

axios 的申请拦挡是向数组后面追加的，而响应拦挡是向数组前面追加的，所以当 axios 发送申请时，
申请拦挡的回调函数最初指定的，最先被调用，从左向右执行。如下图所示：

以上就是 axios 发送申请对于申请拦挡和响应拦挡的执行过程

axios 拦截器的执行程序

以上代码的打印后果程序为：