平时咱们发送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发送申请对于申请拦挡和响应拦挡的执行过程