axios

（一）请求头

标题
`application/json`（默认）	以JSON格式的发送到后端。这种类型使用最为广泛。
`application/x-www-form-urlencoded`	请求体中的数据会以普通表单形式（键值对）发送到后端
`multipart/form-data`	参数会在请求体中，以标签为单元，用分隔符(可以自定义的boundary)分开。既可以上传键值对，也可以上传文件。通常被用来上传文件的格式。

（二）取消请求

思路解析：

添加配置对象的属性 cancelToken，获取取消请求的回调函数c
将c函数赋值给全局变量cancel
请求成功之后将cancel清空
每次请求前判断cancel是否为空，
- 若不为空，则说明上次请求还没完成，调用cancel取消当前的请求
- 若为空，则说明上次请求已完成，则可以再次发送请求

   <div class="container">
        <h2 class="page-header">axios取消请求</h2>
        <button class="btn btn-primary"> 发送请求 </button>
        <button class="btn btn-warning"> 取消请求 </button>
    </div>
    <script>
        const btns = document.querySelectorAll('button'); //获取按钮
        // 2.声明全局变量
        let cancel = null;
        //发送请求
        btns[0].onclick = function () {
            //检测上一次的请求是否已经完成
            if (cancel !== null) {
                cancel(); //取消上一次的请求
            }
            axios({
                method: 'GET',
                url: 'http://localhost:3000/posts',
                //1. 添加配置对象的属性
                cancelToken: new axios.CancelToken(function (c) {
                    //3. 将 c 的值赋值给 cancel
                    cancel = c;
                })
            }).then(response => {
                console.log(response);
                cancel = null; //请求完成，将 cancel 的值初始化
            })
        }

        //绑定第二个事件取消请求
        btns[1].onclick = function () {
            cancel();
        }
    </script>

[延伸问题]

1. Axios 中可以做哪些全局处理

在使用 Axios 进行网络请求时，可以通过全局处理来统一处理一些公共的逻辑或配置。以下是一些常见的全局处理选项：

全局默认配置：例如设置默认的请求头、超时时间、认证信息等。
拦截器处理：
- 请求拦截器：在发送请求之前对请求进行预处理。
  例如在请求发送前添加请求头、修改请求数据、验证用户登录状态等。
- 响应拦截器：在接收到响应后对响应进行处理。
  例如，统一处理错误状态码、格式化响应数据、进行权限验证等。
错误处理：可以通过全局错误处理来处理请求过程中发生的错误。例如，在发生网络错误、超时或其他异常情况时，可以统一显示错误提示或进行特定操作。
实例化 Axios 对象：可以创建多个 Axios 实例，每个实例具有自己的配置和拦截器。这使得可以根据需要为不同的请求场景实现不同的处理逻辑。