AXIOS

AXIOS封装

axios 是一个基于 Promise 的现代化 HTTP 客户端，用于浏览器和 Node.js 环境。它是一个流行的第三方库，用于进行 HTTP 请求并处理响应。以下是关于 axios 的一些重要信息：

1. 特点：

   • 在浏览器和 Node.js 中均可使用。
   • 支持 Promise API，可以使用 async/await 进行异步操作。
   • 提供了拦截器（interceptors）功能，可以在请求或响应被 then 或 catch 处理前拦截它们。
   • 支持取消请求。
   • 自动转换 JSON 数据。
   • 提供了一些便捷的方法来处理请求和响应错误。

2. 安装：

   npm install axios
   或
   yarn add axios
   

3. 拦截器

   // 添加请求拦截器
   axios.interceptors.request.use(config => {
     // 在发送请求之前做些什么
     return config;
   }, error => {
     // 对请求错误做些什么
     return Promise.reject(error);
   });
   
   // 添加响应拦截器
   axios.interceptors.response.use(response => {
     // 对响应数据做点什么
     return response;
   }, error => {
     // 对响应错误做点什么
     return Promise.reject(error);
   });
   

4. 取消请求：

   const CancelToken = axios.CancelToken;
   let cancel;
   
   axios.get('https://api.example.com/data', {
     cancelToken: new CancelToken(function executor(c) {
       // executor 函数接收一个 cancel 函数作为参数
       cancel = c;
     })
   });
   
   // 取消请求
   cancel();
   

5. 可以在 Axios 的实例上配置取消请求的功能，以便在整个应用程序中实现统一的请求取消管理

   import axios from 'axios';
   
   // 创建一个 Axios 实例
   const axiosInstance = axios.create({
     baseURL: 'https://api.example.com',
     timeout: 5000, // 请求超时时间，单位毫秒
   });
   
   // 创建一个 CancelToken.source 实例
   const cancelToken = axios.CancelToken.source();
   
   // 请求拦截器，添加 cancelToken
   axiosInstance.interceptors.request.use(config => {
     config.cancelToken = cancelToken.token;
     return config;
   });
   
   // 响应拦截器，处理取消请求
   axiosInstance.interceptors.response.use(response => {
     return response;
   }, error => {
     if (axios.isCancel(error)) {
       console.log('Request canceled', error.message);
     }
     return Promise.reject(error);
   });
   
   // 导出封装后的 Axios 实例
   export default axiosInstance;
   
   // 取消请求的方法
   export const cancelRequest = () => {
     cancelToken.cancel('Request canceled by the user');
   };
   

   首先创建了一个 Axios 实例 axiosInstance，并配置了 baseURL 和 timeout 等默认选项。然后，在请求拦截器中添加了 cancelToken，确保每个请求都带有取消功能。在响应拦截器中，处理了取消请求的情况。

   最后，导出了封装后的 Axios 实例 axiosInstance，以及一个用于取消请求的方法 cancelRequest。通过这种方式，可以在整个应用程序中使用封装后的 Axios 实例，并在需要时调用 cancelRequest 方法来取消请求。

6. 取消请求发生的场景

   • 用户操作变更：当用户执行了某个操作，但在操作完成前又决定取消或者转向其他操作时，可以取消之前发起的请求。
   • 页面跳转：当用户从一个页面快速跳转到另一个页面时，之前页面上发起的请求可能已经变得无效。
   • 网络延迟：如果网络延迟导致请求返回时间过长，而用户已经不再需要该请求的结果，可以取消请求以提高用户体验和节省资源。
   • 避免并发请求：在某些情况下，为了避免重复请求或者并发请求，可以在发起新请求前先取消之前的请求。