快捷導(dǎo)航

JS中AbortController中止請求操作的實現(xiàn)示例

更新時間：2026年02月24日 09:18:54 作者：發(fā)現(xiàn)一只大呆瓜

AbortController是JavaScript中的一個信號控制對象,用于實現(xiàn)異步操作的可控制和可中止,本文主要介紹了JS中AbortController中止請求操作的實現(xiàn)示例,感興趣的可以了解一下

前言

在前端開發(fā)中，我們經(jīng)常遇到需要中途撤回請求的情況（例如：搜索框快速輸入、大型文件上傳取消、或是 AI 聊天流的即時中斷）。傳統(tǒng)的 Promise 一旦啟動就無法在外部“叫停”，而 AbortController 的出現(xiàn)，完美填補了這一空白。

一、核心概念與原理

AbortController 是 JavaScript 內(nèi)置的信號控制對象，它是實現(xiàn)異步操作可控制、可中止的核心。

1. 關(guān)鍵組成部分

controller.signal：一個 AbortSignal 對象實例。它充當(dāng)“監(jiān)聽器”，將其傳遞給異步操作后，該操作會持續(xù)觀察信號狀態(tài)。
controller.abort() ：觸發(fā)中止的方法。調(diào)用后，signal 上的 abort 事件會被觸發(fā)，同時將 signal.aborted 設(shè)為 true。

二、基礎(chǔ)使用模式

1. 實現(xiàn)步驟

使用 new AbortController() 生成實例。
將實例中的 signal 屬性傳遞給需要支持中止的異步 API（如 fetch）。
在合適的時機(jī)調(diào)用 controller.abort() 即可主動終止。

2. 代碼示例

// 1. 創(chuàng)建 AbortController 實例
const controller = new AbortController();
const { signal } = controller;

// 2. 發(fā)起請求并綁定信號
fetch("/api/data", { signal })
  .then((response) => response.json())
  .then((data) => console.log("請求成功:", data))
  .catch((err) => {
    // 3. 捕獲中止錯誤
    if (err.name === "AbortError") {
      console.log("主動取消：請求被成功截斷");
    } else {
      console.error("請求失敗:", err);
    }
  });

// 2 秒后主動取消請求
setTimeout(() => {
  controller.abort(); 
}, 2000);

三、進(jìn)階技巧與場景

1. 批量取消請求

如果想同時取消多個相關(guān)的請求，可以給這些請求共享同一個 signal。當(dāng)調(diào)用 abort() 時，所有關(guān)聯(lián)的任務(wù)都會收到中止信號。

2. 示例

// 使用同一個 AbortController 取消多個請求
const controller = new AbortController();

// 請求1
const request1 = fetch('url1', {
  signal: controller.signal
});

// 請求2
const request2 = fetch('url2', {
  signal: controller.signal
});

// 請求3
const request3 = fetch('url3', {
  signal: controller.signal
});

// 同時取消所有請求
document.getElementById('cancelBtn').addEventListener('click', () => {
  controller.abort();
  console.log('所有請求已取消');
});

// 等待所有請求
Promise.all([request1, request2, request3])
  .then(responses => Promise.all(responses.map(r => r.json())))
  .then(data => console.log('所有數(shù)據(jù):', data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('請求被取消');
    }
  });

3. 注意事項

兼容性：并非所有 API 都原生支持。目前 fetch、Axios (v0.22+) 模塊已提供支持。
冪等性：abort() 方法只能生效一次。多次調(diào)用雖然不會報錯，但只有第一次調(diào)用會觸發(fā)中止邏輯。

四、總結(jié)對比

特性	傳統(tǒng) Promise	帶有 AbortController 的 Promise
可控性	開啟后無法干預(yù)	可隨時通過 abort() 中止
異常處理	只有成功/失敗	增加 AbortError 類型，方便區(qū)分主動取消與網(wǎng)絡(luò)異常
應(yīng)用場景	簡單的數(shù)據(jù)獲取	復(fù)雜交互、流式輸出、性能調(diào)優(yōu)

到此這篇關(guān)于JS中AbortController中止請求操作的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)JS AbortController中止請求操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: