取消哀求：axios.

axios.CancelToken和isCancel

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

使用方式1

1.   const testFun = async () => {
2.     let cancel: any; // 保存取消函数
3.     // 发送请求，配置 cancelToken
4.     axios
5.       .get('/api/authorization/initData1', {
6.         cancelToken: new axios.CancelToken(function executor(c) {
7.           cancel = c; // 将取消函数赋值给外部变量
8.         }),
9.       })
10.       .catch((err) => {
11.         if (axios.isCancel(err)) {
12.           console.log('请求已取消！', err);
13.         } else {
14.           console.log('其他错误!', err);
15.         }
16.       });
18.     // 取消请求
19.     cancel('请求被终止11');
20.   };

复制代码

如下图，这个接口就被cancel了

使用方式2

1. const axios = require('axios');
3. // 创建 CancelToken 的 source 对象
4. const source = axios.CancelToken.source();
6. // 发送请求，配置 cancelToken
7. axios.get('/api/data', {
8.   cancelToken: source.token
9. })
10.   .then(response => console.log(response))
11.   .catch(error => {
12.     if (axios.isCancel(error)) {
13.       console.log('请求已取消:', error.message);
14.     } else {
15.       // 处理其他错误
16.     }
17.   });
19. // 取消请求（可传入提示信息）
20. source.cancel('用户取消了请求');

复制代码

AbortController

欣赏器的原生api。全部的哀求库都能使用这个方法。全部欣赏器都支持。

• 
  
  • AbortController 的实例 用来绑定到anxios的signal 上。
    
  
  
• 
  
  • controller.abort触发哀求。
    
  
  
• 
  
  • error.name === ‘CanceledError’。查抄是否取消范例的错误
    
  
  

1.   const testFun1 = async () => {
2.     const controller = new AbortController();
3.     axios
4.       .get('/api/authorization/initData', {
5.         signal: controller.signal, // 绑定 AbortSignal
6.       })
7.       .then((response) => console.log(response))
8.       .catch((error) => {
9.         if (error.name === 'CanceledError') {
10.           // 检查是否取消
11.           console.log('请求已取消！', error);
12.         } else {
13.           console.error('其他错误:', error);
14.         }
15.       });
17.     // 触发取消
18.     controller.abort('这是一次手动取消');
19.   };

复制代码

兼容性: 全部今世欣赏器均支持 AbortController，IE 需 polyfill。
错误传播: 取消的哀求会进入 .catch()，需明白区分取消和其他错误。
不可重复使用: 一个 AbortController 只能取消一次，如需多次取消需创建新实例。
二者对比

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告