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', '<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。我們可以構(gòu)造一個 controller 實例：const controller = new AbortController() , controller 它有一個只讀屬性 AbortController.signal，可以作為參數(shù)傳入到 fetch 中，用于將控制器與獲取請求相關聯(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);
瀏覽器控制臺對比圖：
我們其實可以在 controller.abort() 傳入“取消請求的原因”參數(shù)，然后進行 try...catch 捕獲
取消 aixos 請求
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);
控制臺截圖：
錯誤捕獲：
注意：axios 之前用于取消請求的 CancelToken 方法已經(jīng)被棄用，更多請見文檔 axios-http.com/docs/cancel…；
以上就是JavaScript取消請求方法的詳細內(nèi)容，更多關于JavaScript取消請求的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了詳解微信小程序 登錄獲取unionid的相關資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家介紹了JavaScript本地存儲的全面解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了洋蔥模型?koa-compose源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了electron?中?webview的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
本文主要介紹Google 地圖疊加層,這里幫大家整理了Google地圖疊加層一些實用代碼并詳細介紹了相關知識，有需要的小伙伴可以參考下2016-08-08
JS精髓原型鏈繼承及構(gòu)造函數(shù)繼承問題糾正
這篇文章主要為大家介紹了JS精髓原型鏈繼承及構(gòu)造函數(shù)繼承問題糾正，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了微信小程序 location API接口相關資料,這里詳細介紹了location API接口并附簡單實例代碼，需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了JS圖形編輯器之場景坐標視口坐標的相互轉(zhuǎn)換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
lodash內(nèi)部方法getData和setData實例解析
本篇章我們將了解lodash里內(nèi)部關于Data的操作方法，重點關注getData、setData兩個內(nèi)部方法，同時由實現(xiàn)上引申其他內(nèi)部封裝的方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序radio組件詳細介紹的相關資料,需要的朋友可以參考下2016-09-09