使用 axios 工具类实现网络请求
在前端开发中，经常需要与后端进行数据交互，获取数据或者提交数据。而网络请求是实现数据交互的重要一环。在 JavaScript 开发中，我们可以使用各种工具类来处理网络请求，其中最常用的就是 axios 工具类。
什么是 axios？
axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中发送 HTTP 请求。它具备以下特点：
- 简单易用：axios 提供了一套简洁且功能强大的 API，易于学习和使用。
- 支持浏览器和 Node.js：axios 可以在浏览器和 Node.js 环境下运行，实现跨平台的功能。
- 支持 Promise：axios 基于 Promise 实现，可以通过 Promise 的方式处理异步请求，提供更好的代码可读性和维护性。
- 支持拦截器：axios 提供了请求和响应的拦截器，可以在发送请求之前和接收响应之后对数据进行处理。
- 支持取消请求：axios 提供了取消请求的功能，可以在请求发送之前或者接收响应之后取消正在进行的请求。
如何使用 axios？
在使用 axios 之前，我们需要先安装 axios。可以通过 npm 或者 yarn 来进行安装：
npm install axios
安装完成后，我们就可以在代码中引入 axios 并使用了。下面是一个简单的示例：
import axios from 'axios';
// 发送 GET 请求
axios.get('/api/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
// 发送 POST 请求
axios.post('/api/data', { name: 'John', age: 20 })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
在上面的示例中，我们使用 axios 的 get 和 post 方法分别发送了一个 GET 请求和一个 POST 请求。在请求成功后，我们通过 then 方法获取响应的数据，而在请求失败后，我们通过 catch 方法处理错误信息。
使用拦截器进行数据处理
axios 提供了请求和响应的拦截器，可以在发送请求之前和接收响应之后对数据进行处理。下面是一个使用拦截器的示例：
import axios from 'axios';
// 设置请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
console.log('请求拦截器');
return config;
}, error => {
// 对请求错误做些什么
console.error('请求错误：', error);
return Promise.reject(error);
});
// 设置响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做些什么
console.log('响应拦截器');
return response;
}, error => {
// 对响应错误做些什么
console.error('响应错误：', error);
return Promise.reject(error);
});
// 发送请求
axios.get('/api/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
在上面的示例中，我们使用 axios.interceptors.request.use 方法设置了一个请求拦截器，可以在发送请求之前对请求进行处理。类似地，我们使用 axios.interceptors.response.use 方法设置了一个响应拦截器，可以在接收响应之后对响应进行处理。
取消请求
axios 提供了取消请求的功能，可以在请求发送之前或者接收响应之后取消正在进行的请求。下面是一个使用取消请求的示例：
import axios from 'axios';
// 创建一个 CancelToken 对象
const source = axios.CancelToken.source();
// 发送请求
axios.get('/api/data', { cancelToken: source.token })
.then(response => {
console.log(response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('请求已取消：', error.message);
} else {
console.error(error);
}
});
// 取消请求
source.cancel('请求取消');
在上面的示例中
