使用 AbortController 取消异步请求,比如 xmlHttpRequest/fetch 发起的请求。
const controller = new AbortController();
const signal = controller.signal;
fetch("https://api.example.com/data", { signal })
.then((response) => response.json())
.then((data) => console.log(data))
.catch((err) => {
if (err.name === "AbortError") {
console.log("请求被取消");
} else {
console.error("其他错误", err);
}
});
// 3 秒后取消请求
setTimeout(() => {
controller.abort();
}, 3000);
同时 abortController 不仅仅只是用来取消异步请求,它还可以用来取消 addEventListener 事件监听,再也不需要通过 removeEventListener 来取消监听了,省的每次还得保留回调函数引用来移除监听器,直接一步到位使用 abort 取消
const controller = new AbortController();
const signal = controller.signal;
document.addEventListener(
"click",
() => {
console.log("点击了页面");
},
{ signal }
);
// 5 秒后自动移除监听器
setTimeout(() => {
controller.abort();
console.log("事件监听器已取消");
}, 5000);
取消定时任务或者其他异步逻辑等
async function doSomething(signal) {
await new Promise((resolve, reject) => {
const id = setTimeout(resolve, 5000);
signal.addEventListener("abort", () => {
clearTimeout(id);
reject(new DOMException("Aborted", "AbortError"));
});
});
}