使用AbortController终止pending状态的fetch请求，再次使用可以正常使用

1、外层定义controller；一旦中止，AbortController就会被消耗。每次调用都必须创建新的实例。
2、方法体内定义具体实现
controller = new AbortController();
const signal = controller.signal;
3、fetch请求内参数体加 signal参数

//终止fetch请求
    let controller;
    watch(
      () => props.visible,
      () => {
        if (!props.visible) {
          controller.abort();
        }
      },
    );
const getUpLoadUrl = async (
      fileSize,
      UploadUrlFile,
      Params,
      record,
      fileSizeByte,
      fileType,
    ) => {
      controller = new AbortController();
      const signal = controller.signal;
。。。。。。。。。
 fetch(k.url, {
                method: 'PUT',
                body,
                signal,
              })
｝

业务场景： 文件切片上传时需要不断的进行接口请求，文件比较大时需要耗费一定的时间，假如想在中途取消文件上传，那么就需要终止正在进行的接口请求。

• 在需要终止接口请求的页面引入 axios （此处的接口请求已封装）

import axios from "axios";

• 封装好的接口请求方法里加入（需要中断的接口需要传此参数）

2580638-20220817160101107-1909658616.png

• 定义一个全局变量 source，然后调用令牌'CancelToken’

2580638-20220817171315187-1970907149.png

source 中有 token 令牌和取消请求的 cancel 方法

• 在需要终止请求的时候调用

2580638-20220817172205320-722300499.png