取消请求：axios.

axios.CancelToken和isCancel

• 1. cancelToken的作用是获取取消函数，用来手动取消接口。
• 2. axios.isCancel的作用是在处理错误的时候判断当前错误，是否是由于取消导致的。

使用方式1

const testFun = async () => { let cancel: any; // 保存取消函数 // 发送请求，配置 cancelToken axios .get(’/api/authorization/initData1’, { cancelToken: new axios.CancelToken(function executor(c) { cancel = c; // 将取消函数赋值给外部变量 }), }) .catch((err) => { if (axios.isCancel(err)) { console.log(‘请求已取消！’, err); } else { console.log(‘其他错误!’, err); } }); // 取消请求 cancel(‘请求被终止11’); }; 如下图，这个接口就被cancel了

使用方式2

const axios = require(‘axios’); // 创建 CancelToken 的 source 对象 const source = axios.CancelToken.source(); // 发送请求，配置 cancelToken axios.get(’/api/data’, { cancelToken: source.token }) .then(response => console.log(response)) .catch(error => { if (axios.isCancel(error)) { console.log(‘请求已取消:’, error.message); } else { // 处理其他错误 } }); // 取消请求（可传入提示信息） source.cancel(‘用户取消了请求’);

AbortController

浏览器的原生api。所有的请求库都能使用这个方法。所有浏览器都支持。

• 1. AbortController 的实例 用来绑定到anxios的signal 上。
• 2. controller.abort触发请求。
• 3. error.name === ‘CanceledError’。检查是否取消类型的错误 const testFun1 = async () => { const controller = new AbortController(); axios .get(’/api/authorization/initData’, { signal: controller.signal, // 绑定 AbortSignal }) .then((response) => console.log(response)) .catch((error) => { if (error.name === ‘CanceledError’) { // 检查是否取消 console.log(‘请求已取消！’, error); } else { console.error(‘其他错误:’, error); } }); // 触发取消 controller.abort(‘这是一次手动取消’); };

兼容性: 所有现代浏览器均支持 AbortController，IE 需 polyfill。 错误传播: 取消的请求会进入 .catch()，需明确区分取消和其他错误。 不可重复使用: 一个 AbortController 只能取消一次，如需多次取消需创建新实例。

二者对比