JavaScript取消請求有哪些方法

3403771864 發(fā)布于2023-03-17 21:13 / 601人閱讀

　　本篇文章主要為大家講述的就是關(guān)于JavaScript 實現(xiàn)異步請求就靠瀏覽器提供的兩個 API —— XMLHttpRequest 和 Fetch。在日常中用多的比較多的就是Promise 請求庫 axios，它基于 XMLHttpRequest。

　　現(xiàn)在我們就來講講呱 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會被設(shè)為 0 ；

　　現(xiàn)就就一起看 Chrome DevTools Network 中，看看正常請求和取消請求的對比圖：

　　取消 Fetch 請求

　　取消 Fetch 請求，需要用到AbortControllerAPI。我們可以構(gòu)造一個 controller 實例：const controller = new AbortController(), controller 它有一個只讀屬性AbortController.signal，可以作為參數(shù)傳入到 fetch 中，用于將控制器與獲取請求相關(guān)聯(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);

　　控制臺截圖：