乐趣区

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

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

axios 拦截器的执行程序

  1. 申请拦挡:axios 的申请拦挡会先执行最初指定的回调函数先执行,顺次向后面执行。
  2. 响应拦挡: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('胜利了');
            })
以上代码的打印后果程序为:
  1. console.log( 申请拦挡 2 );
  2. console.log( 申请拦挡 1 );
  3. console.log( 胜利的响应拦挡 1 );
  4. console.log( 胜利的响应拦挡 2 );
  5. console.log( 胜利了 );

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

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

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

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

退出移动版