Axios abort 哀求

一、Axios 哀求传参

• 新建 AbortController 实例，该实例的 signal 作为 Axios 哀求的参数。
  
• Axios 哀求中传入 signal。
  

1. let abortController = new AbortController(), // Axios Controller 实例
3. const config = {
4.     requestParams,
5.     headers,
6.     timeout,
7.     signal: abortController.signal,        // 传入的 signal
8.     onUploadProgress,
9. };
11. // Get 请求
12. this.axios
13.   .get(url, config)
14.   .then((res: any) => {
15.     this.resultHandle(res, resolve, loading);
16.   })
17.   .catch((err: { message: any }) => {
18.     reject(err.message);
19.   });
21. // Post 请求
22. this.axios
23.   .post(url, bodyParams, config)
24.   .then((res: any) => {
25.       this.resultHandle(res, resolve, loading);
26.   })
27.   .catch((err: any) => {
28.       reject(err);
29.   });

复制代码

二、abort 哀求

为防止 AbortController 实例非常，在外面加了 trycatch 捕获非常情况。

1. try {
2.     abortController && abortController.abort();
3. } catch (error) {
4.     console.log('Abort Error', error);
5. }

复制代码

三、并行哀求 abort，和单个哀求 abort 用法同等。

• abortController 实例只用创建一次
  
• 每个哀求的参数中传入该实例的 signal
  
• abort 方法调用一次，所有并行哀求都会 Cancel
  

四、非常情况

1. 单个哀求，接口无响应

• 原因：abortController.signal.aborted 初始状态为 false, 此时不影响接口调用；
  
  
  
  当 abort() 调用后，该状态变成 true，这个状态下再次发哀求会无响应。
  
  
  
  
• 解决方法：由于 abortController.signal.aborted 属性是只读属性，无法直接对该状态举行重置。
  但可以创建新实例，并赋值给 abortController  变量。达到更新 abortController.signal.aborted 状态目标，
  使得接口可以被再次调用。代码如下：
  

1. abortController = new AbortController();

复制代码

2. 并行哀求，哀求接口无响应

• 原因：与单个哀求同等，存在 abort() 方法被调用，状态变更。
  
• 解决方法：
  
  
  
  • 找到并行哀求开始执行的位置；
    
  • 在此之前，执行和 步调1 同等的代码即可更新状态；
    
  • 实例的 abortController.signal.aborted 状态被更新成 false，此时接口可以被正常调用；
    
  
  

五、总结

• Axios abort 哀求，依赖于 AbortController 实例 abort() 方法。
  
• 单个和并行哀求，只需创建一次 AbortController 实例。 abort() 哀求时，abort() 方法只需调用一次。
  
• 在接口哀求之前更新 AbortController 实例，防止实例 abortController.signal.aborted 状态 true 时，导致的接口无响应。
  

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