JavaScript取消請求方法

更新時間：2022年07月07日 17:23:00 作者：掘金安東尼

這篇文章主要為大家介紹了JavaScript取消請求方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

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

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

閑話少說，沖就完事了~

取消 XMLHttpRequest 請求

當請求已經(jīng)發(fā)送了，可以使用 XMLHttpRequest.abort() 方法取消發(fā)送，代碼示例如下：

const xhr = new XMLHttpRequest();
xhr.open('GET', '&lt;http://127.0.0.1:3000/api/get&gt;', true);
xhr.send();
setTimeout(() =&gt; {
	 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，可以作為參數(shù)傳入到 fetch 中，用于將控制器與獲取請求相關聯(lián)；

代碼示例如下：

const controller = new AbortController();
void (async function () {
    const response = await fetch('&lt;http://127.0.0.1:3000/api/get&gt;', {
        signal: controller.signal,
    });
    const data = await response.json();
})();
setTimeout(() =&gt; {
    controller.abort();
}, 1000);

瀏覽器控制臺對比圖：

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

取消 aixos 請求

axios 同樣支持 AbortController

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

控制臺截圖：