引言

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

本篇帶來(lái) XMLHttpRequest、Fetch 和 axios 分別是怎樣“取消請(qǐng)求”的。

閑話少說(shuō)，沖就完事了~

取消 XMLHttpRequest 請(qǐng)求

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

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

取消請(qǐng)求，readyState 會(huì)變成 XMLHttpRequest.UNSENT(0)；請(qǐng)求的 xhr.status 會(huì)被設(shè)為 0 ；

不如在 Chrome DevTools Network 中，看看正常請(qǐng)求和取消請(qǐng)求的對(duì)比圖：

取消 Fetch 請(qǐng)求

取消 Fetch 請(qǐng)求，需要用到 AbortController API。我們可以構(gòu)造一個(gè) controller 實(shí)例：const controller = new AbortController() , controller 它有一個(gè)只讀屬性 AbortController.signal，可以作為參數(shù)傳入到 fetch 中，用于將控制器與獲取請(qǐng)求相關(guān)聯(lián)；

代碼示例如下：

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);

瀏覽器控制臺(tái)對(duì)比圖：

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

取消 aixos 請(qǐng)求

axios 同樣支持 AbortController

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);

控制臺(tái)截圖：

錯(cuò)誤捕獲：

注意：axios 之前用于取消請(qǐng)求的 CancelToken 方法已經(jīng)被棄用，更多請(qǐng)見文檔 axios-http.com/docs/cancel…；

以上就是JavaScript取消請(qǐng)求方法的詳細(xì)內(nèi)容，更多關(guān)于JavaScript取消請(qǐng)求的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論