首先，要用到一个新的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;// 创建一个primesconst myPromise = new Promise((resolve, reject) => {// 模拟一个异步操作，比如setTimeoutconst timerId = setTimeout(() => {// 在执行异步操作前，应该先检查是否取消了promiseif (signal.aborted) {reject(new Error("Promise cancelled"));} else {resolve("Promise resolved");}}, 3000);// 监听取消信号signal.addEventListener("abort", () => {// 如果收到取消信号，就清楚异步操作clearTimeout(timerId);// 同时拒绝promisereject(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(
原创文章，作者：guozi，如若转载，请注明出处：https://www.sudun.com/ask/80458.html
