平时我们发送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(
成功了);
因为axios将响应拦截和请求拦截都存放在一个数组中
文章图片
文章图片
而axios开始发送请求，是每次从数组中删除两个回调函数来开始执行，只到数组为空则执行完成。
文章图片
axios的请求拦截是向数组前面追加的，而响应拦截是向数组后面追加的，所以当axios发送请求时，
请求拦截的回调函数最后指定的，最先被调用，从左向右执行。如下图所示：
文章图片
以上就是axios发送请求关于请求拦截和响应拦截的执行过程
推荐阅读
- el-table分页数据+回显+勾选状态+记录数据(map实战)
- 如何理解js执行上下文
- 回调函数到promise再到理解async/await
- 夯实基础上篇-图解 JavaScript 执行机制
- JavaScript的几种继承方式
- JavaScript实现九九乘法表（四种方法）
- 如何在 JavaScript 中获得“准确的”倒计时
- 破解JavaScript高级玩法,成为精通 JS 的原生专家吾爱
- 一起动手实战图片懒加载