从零到一：Axios助力你的API交互之旅

axios 原理

通过XMLHttpRequest或Node.js的http/https模块来发送http请求，并返回一个Promise对象。使得发送HTTP请求变得简单，并支持多种特性，比如请求和响应的拦截、取消请求、转换请求、响应数据等等。

中文官网

拦截器

请求拦截

定义拦截器

axios.interceptors.request.use()接受两个参数，一个成功处理函数和一个失败处理函数，两个函数都有一个配置对象作为参数，并返回一个修改后的配置对象或者Promise。

添加拦截器
处理请求

在成功处理函数中，可以修改配置项（请求头，请求体，参数等等）并返回修改后的配置项。

处理错误

在失败处理函数中，可以处理请求在到达服务器之前发生的错误（网络错误，配置错误等等），可以返回一个Promise，可解析为新的配置项或者错误。

响应拦截

与请求拦截类似，只是处理的是服务器的响应。

优缺点

优点

灵活性 : 可在多个阶段添加自定义逻辑，例如添加认证信息，处理错误等等.
全局配置：拦截器会应用于所有的请求或响应，减少重复代码，使全局性的配置和修改会变得简单.
可维护性
控制响应：可以在响应拦截器中根据响应的数据决定是直接返回数据还是抛出错误还是进行其他处理.
方便的错误处理：可以在响应拦截器中同意处理服务器的错误状态码.

缺点

由于其全局性，如果出现错误会对所有请求产生影响；
在高并发或者大量请求的场景下，会对性能产生一定的影响；
若过度使用拦截器，会增加代码的复杂性且难以维护。

二次封装实例

安装axios

js 复制代码

yarn add axios
npm install axios

新建一个 axios 实例

在scr文件夹下创建一个utils文件夹，在utils文件夹下创建一个request.js的文件，引入axios后，使用creat创建一个实例

js 复制代码

const request = axios.create({
    baseURL: '/api', // 设置基础 URL， 当使用这个 axios 实例发起请求时，所有请求的 URL 都会自动以 `/api` 开头，除非在请求时明确指定了完整的 URL
    headers: { // 设置默认的请求头
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    withCredentials: true,// 设置为 `true`，这允许跨站请求时携带凭证
    timeout: 30000, // 设置超时时间，如果请求在 30 秒内没有响应，那么 axios 会抛出一个错误
    transformRequest: [(data) => { // 在发送请求之前修改请求数据
        return data
    }],
});
//还有很多的配置项，可以访问官网去添加自己需要的配置项

添加拦截器

js 复制代码

// 添加请求拦截器
request.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
request.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});