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