取消請求

發(fā)送一個異步請求獲取數(shù)據(jù)，并在控制臺中打印出返回結果。這里使用了 fetch 方法來發(fā)送請求，同時使用 AbortController 對象來實現(xiàn)請求的取消操作。

具體來說，代碼中定義了一個 list 函數(shù)，該函數(shù)會創(chuàng)建一個 AbortController 對象，并將其傳遞給 fetch 方法的 signal 參數(shù)中，以便在需要取消請求時使用。在發(fā)送新的請求之前，會先檢查上一次請求是否已經(jīng)完成，如果沒有完成，則會使用 AbortController 對象的 abort 方法來取消上一次請求。

圖下面代碼所示

在里面使用異常捕獲，因為再多次發(fā)送請求時并取消請求會提示This operation was aborted

let controller;const list = async () => {controller && controller.abort();controller = new AbortController();try {const result = await fetch("http://129.211.12.48:8080/api/forum/loadArticle",{ signal: controller.signal }).then((resp) => resp.json());console.log(result);} catch (error) {console.log("取消了上一次請求");}
};list();
list();

請求取消只能在fetch中實現(xiàn)，在xhr中無法實現(xiàn)，如相關庫axios也是基于xhr實現(xiàn)的無法請求取消

axios 取消請求

首先創(chuàng)建了一個 CancelToken 實例，然后將其傳遞給請求的配置對象中。如果需要取消請求，可以調用 cancel 方法，并傳遞一個取消請求的原因。在請求的 catch 方法中，可以檢查錯誤對象是否是由于請求被取消而導致的，如果是，就可以根據(jù)需要進行處理。

需要注意的是，如果請求已經(jīng)發(fā)送并且正在等待響應，那么取消請求將不起作用，因為請求已經(jīng)在服務器上處理了

import axios from "axios";
?
// 創(chuàng)建 CancelToken 實例
const source = axios.CancelToken.source();
?
// 發(fā)送請求
axios.get("http://129.211.12.28:8080/api/forum/loadArticle", {cancelToken: source.token,}).then((response) => {console.log(response.data);}).catch((error) => {if (axios.isCancel(error)) {console.log("請求已取消：", error.message);} else {console.log("請求出錯：", error.message);}});
?
// 取消請求
source.cancel("請求被用戶取消");