js中AbortController請求中止的實現(xiàn)
更新時間：2026年01月15日 11:04:44 作者：新節(jié)
AbortController是JavaScript中用于中止Web請求的API,主要應(yīng)用于fetch請求,也可用于其他瀏覽器API和第三方庫,下面就來介紹一下AbortController請求中止的使用,感興趣的可以了解一下
一、介紹
AbortController 是 JavaScript 提供的一個強大工具，它允許開發(fā)者中止一個或多個 Web 請求。這個 API 最初是為了 fetch 請求設(shè)計的，但現(xiàn)在已經(jīng)被許多其他瀏覽器 API 和第三方庫所采用。
AbortController 的主要用途包括
- 取消不再需要的
fetch請求； - 清理長時間運行的操作；
- 實現(xiàn)請求超時；
- 處理組件卸載時的資源清理；
二、基本使用
2.1 創(chuàng)建 AbortController
const controller = new AbortController(); const signal = controller.signal;
2.2 與 fetch 結(jié)合使用
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);
}
});
// 在需要時中止請求
controller.abort();
三、常用場景
3.1 用戶觸發(fā)的取消
const controller = new AbortController();
const fetchButton = document.getElementById("fetch-button");
const cancelButton = document.getElementById("cancel-button");
fetchButton.addEventListener("click", () => {
fetch("https://api.example.com/data", { signal: controller.signal }).then(/* ... */).catch(/* ... */);
});
cancelButton.addEventListener("click", () => {
controller.abort();
});
3.2 請求超時
function fetchWithTimeout(url, options, timeout = 5000) {
const controller = new AbortController();
const signal = controller.signal;
// 設(shè)置超時
const timeoutId = setTimeout(() => controller.abort(), timeout);
return fetch(url, { ...options, signal }).finally(() => clearTimeout(timeoutId));
}
fetchWithTimeout("https://api.example.com/data", {}, 3000)
.then(/* ... */)
.catch((err) => {
if (err.name === "AbortError") {
console.log("請求超時");
}
});
3.3 React 組件卸載時取消請求
import { useEffect, useState } from "react";
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
const controller = new AbortController();
fetch("https://api.example.com/data", { signal: controller.signal })
.then((response) => response.json())
.then(setData)
.catch((err) => {
if (err.name !== "AbortError") {
console.error("獲取數(shù)據(jù)失敗:", err);
}
});
return () => controller.abort();
}, []);
return <div>{data ? JSON.stringify(data) : "加載中..."}</div>;
}
3.4 并行請求的統(tǒng)一取消
const controller = new AbortController();
const signal = controller.signal;
const requests = [fetch("/api/data1", { signal }), fetch("/api/data2", { signal }), fetch("/api/data3", { signal })];
Promise.all(requests)
.then(/* 處理所有響應(yīng) */)
.catch((err) => {
if (err.name === "AbortError") {
console.log("所有請求已被取消");
}
});
// 取消所有請求
controller.abort();
四、高級細(xì)節(jié)
4.1 信號狀態(tài)
signal.aborted 屬性可以檢查信號是否已被中止：
const controller = new AbortController(); console.log(controller.signal.aborted); // false controller.abort(); console.log(controller.signal.aborted); // true
4.2 事件監(jiān)聽
可以監(jiān)聽 abort 事件：
const controller = new AbortController();
controller.signal.addEventListener("abort", () => {
console.log("請求被中止");
});
controller.abort();
4.3 重用與限制
一個 AbortController 只能中止一次，之后就不能再使用了：
const controller = new AbortController(); controller.abort(); controller.abort(); // 第二次調(diào)用不會有任何效果
如果需要多次中止操作，需要創(chuàng)建新的 AbortController 實例。
4.4 與其他 API 集成
除了 fetch，AbortController 還可以用于其他 API：
// Web APIs
const videoStream = await navigator.mediaDevices.getUserMedia({
video: true,
signal: controller.signal
});
// Axios
const source = axios.CancelToken.source();
axios.get("/api/data", {
cancelToken: source.token
});
source.cancel();
4.5 自定義中止邏輯
你可以基于 AbortSignal 實現(xiàn)自己的可中止操作：
function doTask(signal) {
return new Promise((resolve, reject) => {
const timer = setTimeout(() => resolve("任務(wù)完成"), 5000);
signal.addEventListener("abort", () => {
clearTimeout(timer);
reject(new DOMException("任務(wù)被中止", "AbortError"));
});
if (signal.aborted) {
clearTimeout(timer);
reject(new DOMException("任務(wù)被中止", "AbortError"));
}
});
}
const controller = new AbortController();
doTask(controller.signal)
.then(console.log)
.catch((err) => {
if (err.name === "AbortError") {
console.log("任務(wù)被中止");
}
});
// 中止任務(wù)
controller.abort();
到此這篇關(guān)于js中AbortController請求中止的實現(xiàn)的文章就介紹到這了,更多相關(guān)js AbortController請求中止內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
JS實現(xiàn)可直接顯示網(wǎng)頁代碼運行效果的HTML代碼預(yù)覽功能實例
這篇文章主要介紹了JS實現(xiàn)可直接顯示網(wǎng)頁代碼運行效果的HTML代碼預(yù)覽功能,通過獲取文本框內(nèi)容并在新窗口打印輸出來實現(xiàn)直接運行html代碼的功能,簡單實用,需要的朋友可以參考下2015-08-08
本篇文章只要是對JS判斷兩個時間大小的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
在 JavaScript 中，prototype 不但能讓對象共享自己財富，而且 prototype 還有尋根問祖的天性，從而使得先輩們的遺產(chǎn)可以代代相傳。2009-12-12
原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)
這篇文章主要介紹了原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
JavaScript圖片旋轉(zhuǎn)效果實現(xiàn)方法詳解
這篇文章主要介紹了JavaScript圖片旋轉(zhuǎn)效果實現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
toString.call()通用的判斷數(shù)據(jù)類型方法示例
這篇文章主要給大家介紹了關(guān)于toString.call()通用的判斷數(shù)據(jù)類型方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
科訊商業(yè)版中用到的ajax空間與分頁函數(shù)...2007-09-09
javascript實現(xiàn)數(shù)字驗證碼的簡單實例
本篇文章主要是對javascript實現(xiàn)數(shù)字驗證碼的簡單實例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
Hooks讓我們?yōu)橄嗤墓δ芫帉懜俚拇a,我們需要編寫的代碼越少,我們就可以越快地啟動應(yīng)用程序,hooks需要在函數(shù)組件中使用,您不能在 React 類中使用 hooks,函數(shù)式的 React 組件更加現(xiàn)代,并支持有用的 hooks,現(xiàn)在流行把舊式的類組件轉(zhuǎn)換為函數(shù)式組件2024-01-01
八點改變div大小的實現(xiàn)代碼，代碼相對來說并不多，需要的朋友可以參考下。2010-02-02