JavaScript 中如何取消請求

---

theme: geek-black

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第21天，點選檢視活動詳情

---

本篇通譯自：https://levelup.gitconnected.com/how-to-cancel-a-request-in-javascript-67f98bd1f0f5

作者：Zachary Lee

眾所周知，JavaScript 實現非同步請求就靠瀏覽器提供的兩個 API —— XMLHttpRequest 和 Fetch。我們平常用的較多的是 Promise 請求庫 axios，它基於 XMLHttpRequest。

本篇帶來 XMLHttpRequest、Fetch 和 axios 分別是怎樣“取消請求”的。

閒話少說，衝就完事了~

取消 XMLHttpRequest *請求*

當請求已經發送了，可以使用 XMLHttpRequest.abort() 方法取消傳送，程式碼示例如下：

js const xhr = new XMLHttpRequest(); xhr.open('GET', '<http://127.0.0.1:3000/api/get>', true); xhr.send(); setTimeout(() => { xhr.abort(); }, 1000);

取消請求，readyState 會變成 XMLHttpRequest.UNSENT(0)；請求的 xhr.status 會被設為 0 ；

不如在 Chrome DevTools Network 中，看看正常請求和取消請求的對比圖：

取消 *Fetch 請求*

取消 Fetch 請求，需要用到 AbortController API。我們可以構造一個 controller 例項：const controller = new AbortController() , controller 它有一個只讀屬性 AbortController.signal，可以作為引數傳入到 fetch 中，用於將控制器與獲取請求相關聯；

程式碼示例如下：

```js const controller = new AbortController(); void (async function () { const response = await fetch('http://127.0.0.1:3000/api/get', { signal: controller.signal, }); const data = await response.json(); })();

setTimeout(() => { controller.abort(); }, 1000); ```

瀏覽器控制檯對比圖：

我們其實可以在 controller.abort() 傳入“取消請求的原因”引數，然後進行 try...catch 捕獲

取消 aixos 請求

axios 同樣支援 AbortController

js const controller = new AbortController(); const API_URL = '<http://127.0.0.1:3000/api/get>'; void (async function () { const response = await axios.get(API_URL, { signal: controller.signal, }); const { data } = response; })(); setTimeout(() => { controller.abort(); }, 1000);

控制檯截圖：

錯誤捕獲：

注意：axios 之前用於取消請求的 CancelToken 方法已經被棄用，更多請見文件 https://axios-http.com/docs/cancellation；

---

OK，以上便是本篇分享。點贊關注評論，為好文助力👍

我是掘金安東尼 🤠 100 萬閱讀量人氣前端技術博主 💥 INFP 寫作人格堅持 1000 日更文 ✍ 關注我，陪你一起度過漫長程式設計歲月 🌏