【长文总结】axios记录

    <div class="container">
        <h2 class="page-header">其他使用</h2>
        <button class="btn btn-primary">发送GET请求</button>
        <button class="btn btn-warning">发送POST请求</button>
        <button class="btn btn--success">发送PUT请求</button>
        <button class="btn btn-danger">发送DELETE请求</button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button')


        axios.interceptors.request.use(function (config) {
            console.log('请求拦截器1，成功');
            console.log(config);
            return config;
        }, function (error) {
            console.log('请求拦截器1，失败');
            return Promise.reject(error);
        });

        axios.interceptors.request.use(function (config) {
            console.log('请求拦截器2，成功');
            console.log(config);

            return config;
        }, function (error) {
            console.log('请求拦截器2，失败');
            return Promise.reject(error);
        });


        axios.interceptors.response.use(function (response) {
            console.log('响应拦截器1，成功');
            console.log(response);
            return response;
        }, function (error) {
            console.log('响应拦截器1，失败');
            return Promise.reject(error);
        });

        axios.interceptors.response.use(function (response) {
            console.log('响应拦截器2，成功');
            console.log(response);

            return response;
        }, function (error) {
            console.log('响应拦截器2，失败');
            return Promise.reject(error);
        });



        //设置默认配置
        axios.defaults.method = 'GET'
        axios.defaults.baseURL = 'http://localhost:3000'
        //发送GET请求
        btns[0].onclick = function () {
            axios.request({
                url: '/posts'

            }).then(response => {
                console.log(response);
            })
        }

在没有异常的情况下，步骤如下：
1.axios发出请求，请求体参数是method，url等；
2.请求拦截器拦截axios发出的请求，具体config是一个对象，如下图，请求拦截器的拦截顺序类似栈，先入后出，例子中的就是拦截器2先拦截，拦截器1再拦截；

3.客户端路由处理后，返回响应数据；
4.返回的响应数据被响应拦截器拦截，响应的response作为拦截器参数传入拦截器函数，然后return出来，被下一个拦截器拦截，或者被自定义的axios后续回调函数接收；

5.自定义回调函数接收拦截器处理后返回的数据，进行处理

特殊情况

如果请求拦截器中不写return config，那么将没有请求传递给服务器端，也就不会有响应，但是promise链会运行下去，传给后面的promise对象的参数，是undefined，所以后续的请求拦截器promise也不是失败的promise，

但是无法给服务器端传递正确参数，所以不会有响应，

因此，响应拦截器就没有参数接收，会失败，到最后响应拦截器再将失败的promise传给自定义的回调函数时，会因为没有提前给回调函数写.catch处理失败的情况，出现以下情况，截图展示后会加上.catch函数进行处理以验证。

如下修改拦截器2，删除return config

        axios.interceptors.request.use(function (config) {
            console.log('请求拦截器2，成功');
            console.log(config);

            // return config;
        }, function (error) {
            console.log('请求拦截器2，失败');
            return Promise.reject(error);
        });

也没有network请求和响应

//此时加上回调函数的失败promise处理

        btns[0].onclick = function () {
            axios.request({
                url: '/posts'

            }).then(response => {
                console.log(response);
            })
            .catch(reason=>{
                // console.log(reason);
                console.log('失败');
            })
        }

结果如下

同理，特殊情况2，删掉响应拦截器的return response，

        axios.interceptors.response.use(function (response) {
            console.log('响应拦截器1，成功');
            console.log(response);
            // return response;
        }, function (error) {
            console.log('响应拦截器1，失败');
            return Promise.reject(error);
        });

此时删除了响应拦截器1 的return response，在之前都正常的情况下，到这里，会给后续的拦截器2传入一个成功的promise，但是没有参数，所以拦截器2接收到的response就是undefined，再到最后的回调函数也是undefined，
结果如下