axios封装取消指定请求

### 如何通过封装 Axios 取消特定的 HTTP 请求 在使用 Axios 进行网络请求时，可以通过 `CancelToken` 或者 `AbortController` 来实现取消特定请求的功能。以下是基于 JavaScript 和 TypeScript 的封装方法以及最佳实践。 #### 使用 CancelToken 实现请求取消功能 Axios 提供了一个内置机制来支持请求取消——`CancelToken`。下面是一个简单的封装示例： ```javascript // 创建一个用于管理取消操作的对象 const CANCEL_TOKEN_SOURCE = axios.CancelToken.source(); class MYRequest { constructor(baseURL) { this.instance = axios.create({ baseURL, timeout: 10000, // 设置超时时间 }); // 添加全局请求拦截器 this.instance.interceptors.request.use( (config) => { console.log('MYRequest类的拦截器请求成功拦截器'); return config; }, (err) => { console.error('MYRequest类的拦截器请求失败拦截器', err); return Promise.reject(err); } ); // 添加全局响应拦截器 this.instance.interceptors.response.use( (response) => { console.log('MYRequest类的拦截器响应成功拦截器'); return response.data; // 返回数据部分而非整个响应对象 }, (error) => { console.error('MYRequest类的拦截器响应失败拦截器', error); const { response } = error; if (axios.isCancel(error)) { console.warn('Request canceled:', error.message); // 处理被取消的情况 } else if (response && response.status === 400) { console.error('Bad Request:', response.data); // 特殊错误处理逻辑 } return Promise.reject(error); } ); } // 发起 GET 请求并允许传入 cancel token get(url, params = {}, options = {}) { return this.instance.get(url, { ...options, params, cancelToken: options.cancelToken || CANCEL_TOKEN_SOURCE.token, // 默认绑定到全局源 }); } // 手动触发取消操作 cancel(message = 'Operation canceled by the user.') { CANCEL_TOKEN_SOURCE.cancel(message); } } ``` 上述代码中引入了 `cancelToken` 参数，并将其默认绑定至全局的 `CANCEL_TOKEN_SOURCE` 对象上。如果需要针对某个具体请求单独控制其生命周期，则可以创建独立的 `CancelToken` 源实例[^1]。 #### 使用 AbortController 替代 CancelToken （推荐） 随着浏览器标准的发展，现代 API 推荐使用更灵活且标准化的方式 —— 即 `AbortController` 。它不仅适用于 Fetch ，也兼容 Axios 并提供更好的跨平台一致性体验: ```typescript import axios from 'axios'; class MyAxiosWrapper { private instance: any; constructor(baseURL?: string){ this.instance = axios.create({baseURL}); // 定义统一配置... } async fetchWithCancellation<T>(url:string, signal?:AbortSignal):Promise<T> | never{ try{ const controller=new AbortController(); if(!signal){ signal=controller.signal ; } const result=(await this.instance.get(url,{signal})) as T; return result; }catch(e:any){ if(e.name==='CanceledError'){ throw new Error(`The operation was aborted ${e.message}`); } throw e; } } } export default MyAxiosWrapper; ``` 此方式下无需额外依赖 Axios 自身扩展模块即可完成相同目标，同时具备更高程度上的互操作性和语义清晰度[^2]^。 #### 注意事项与建议 - **版本适配**: 如果项目中有严格类型的约束需求，在定义接口或者内部调用链路时应特别注意所使用的 Axios 版本差异可能带来的影响[^3]. - **异常捕获**: 当前展示的例子仅演示基本模式；实际开发过程中还需要考虑更多边界条件比如重复调用 `.cancel()` 方法引发的状态冲突等问题.