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发送请求关于请求拦截和响应拦截的执行过程