js实现一个可中断promise 或 中断一个请求的方法

首先，要用到一个新的API：# AbortController

AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。

你可以使用AboutController()构造函数创建一个新的AboutController示例对象，使用signal对象可以完成与异步操作的通信。

构造函数AboutController()

创建一个AboutController的对象实例
const signal = new AboutController()

实例方法

signal.about()

中止一个尚未完成的异步操作。这就能够中止fetch请求 以及 任何响应体 和 流的使用。

中止一个promise

const stopR = document.getElementById("stop");

// 先创建AbortController的实例
const controller = new AbortController();
const signal = controller.signal;

// 创建一个primes
const myPromise = new Promise((resolve, reject) => {
  // 模拟一个异步操作，比如setTimeout
  const timerId = setTimeout(() => {
    // 在执行异步操作前，应该先检查是否取消了promise
    if (signal.aborted) {
      reject(new Error("Promise cancelled"));
    } else {
      resolve("Promise resolved");
    }
  }, 3000);

  // 监听取消信号
  signal.addEventListener("abort", () => {
    // 如果收到取消信号，就清楚异步操作
    clearTimeout(timerId);
    // 同时拒绝promise
    reject(new Error("Promise cancelled"));
  });
});

// 执行异步操作
myPromise
  .then((res) => {
    console.log("res", res);
  })
  .catch((err) => {
    console.log("err:", err);
  });

stopR.onclick = async function () {
  // 取消异步操作时，调用以下方法
  controller.abort();
};

在上面示例中，当调用controller.abort()时，就会触发’ signal.addEventListener("abort"‘这步操作，此刻异步函数还没执行完，在abort()事件中就将异步函数，清除掉了，同时在abort()方法中返回了reject(new Error("Promise cancelled"))，从而使promise停止。

中止一个请求，如fetch

// 先创建AbortController的实例
const controller = new AbortController();
const signal = controller.signal;

// 创建一个fetch请求
const myFetch = fetch("https://www.baidu.com/api/example/data", { signal });

signal.addEventListener("abort", () => {
  console.log("fetch aborted---11");
});

myFetch
  .then((res) => {
    // 处理响应
    if (!res.ok) {
      throw new Error("network response was not ok");
    }
  })
  .then((data) => {
    // 处理数据
    console.log("data::", data);
  })
  .catch((err) => {
    console.error("捕获报错：", err);
  });

// 在取消取消fetch时，调用
controller.abort();