Axios abort 请求

一、Axios 请求传参

1. 新建 AbortController 实例，实例的 signal 作为 Axios 请求的参数。
2. 创建 Axios 请求，请求参数中传入 signal。

let abortController = new AbortController(), // Axios Controller 实例

const config = {
    requestParams,
    headers,
    timeout,
    signal: abortController.signal,	// 传入的 signal
    onUploadProgress,
};

// Get 请求
this.axios
  .get(url, config)
  .then((res: any) => {
    this.resultHandle(res, resolve, loading);
  })
  .catch((err: { message: any }) => {
    reject(err.message);
  });

// Post 请求
this.axios
  .post(url, bodyParams, config)
  .then((res: any) => {
      this.resultHandle(res, resolve, loading);
  })
  .catch((err: any) => {
      reject(err);
  });

二、abort 请求

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

try {
    abortController && abortController.abort();
} catch (error) {
    console.log('Abort Error', error);
}

三、abort 多个并行的请求，和 abort 一个请求一致。

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

四、异常情况

当 abort 一次请求后，重新调用接口无响应。
原因：abortController.signal.aborted 初始化的时候是 false,

当 abort 调用后，该状态变成 true，这个状态下再次发请求会无响应。

解决方法：由于该属性是只读属性，无法对该状态进行重置。
可以在创建请求前，更新 abortController 实例，
像这样 abortController = new AbortController(); 给实例重新赋值。
注意：并行请求的情况，在并行请求创建前更新一次。

五、总结

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