取消請求

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

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

圖下面代碼所示

在里面使用異常捕獲，因?yàn)樵俣啻伟l(fā)送請求時(shí)并取消請求會(huì)提示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中實(shí)現(xiàn)，在xhr中無法實(shí)現(xiàn)，如相關(guān)庫axios也是基于xhr實(shí)現(xiàn)的無法請求取消

axios 取消請求

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

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

import axios from "axios";
?
// 創(chuàng)建 CancelToken 實(shí)例
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("請求出錯(cuò)：", error.message);}});
?
// 取消請求
source.cancel("請求被用戶取消");