JavaScript兩種axios取消請求方式小結

更新時間：2023年03月24日 09:30:40 作者：新一代孔乙己

本文主要介紹了JavaScript兩種axios取消請求方式小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

在使用 axios 發(fā)起請求時，有兩種方法可以取消請求：

通過 CancelToken 實例來取消請求
您可以通過創(chuàng)建一個 CancelToken 實例并將其傳遞給請求的 config 對象中來實現(xiàn)取消請求。然后，在需要取消請求的地方，您可以調用 cancel 方法以發(fā)送取消請求信號。

以下是一個例子：

import axios from 'axios';

const source = axios.CancelToken.source();

const fetchData = async () => {
? try {
? ? const res = await axios.get('/some/url', { cancelToken: source.token });
? ? console.log(res.data);
? } catch (error) {
? ? if (axios.isCancel(error)) {
? ? ? console.log('Request canceled:', error.message);
? ? } else {
? ? ? console.log(error);
? ? }
? }
};


// 在某個時刻取消請求
source.cancel('Operation canceled by the user.');

在上面的代碼中，我們首先創(chuàng)建了一個名為 source 的 CancelToken 實例，并將其傳遞給請求的 config 對象中。然后，在需要取消請求的位置，我們通過調用 source.cancel() 方法來發(fā)送取消請求信號。如果請求已經被取消，則會拋出一個包含取消原因的錯誤，并且您可以在 catch 塊中檢查這個錯誤并處理它。

通過 cancel 屬性來取消請求
另一種方法是直接在請求對象上設置 cancel 屬性，該屬性是一個函數(shù)。當您需要取消請求時，只需調用此函數(shù)即可。

以下是一個例子：

import axios from 'axios';

const fetchData = async () => {
? const request = axios.get('/some/url');

? // 在某個時刻取消請求
? request.cancel('Operation canceled by the user.');

? try {
? ? const res = await request;
? ? console.log(res.data);
? } catch (error) {
? ? if (axios.isCancel(error)) {
? ? ? console.log('Request canceled:', error.message);
? ? } else {
? ? ? console.log(error);
? ? }
? }
};

在上面的代碼中，我們首先發(fā)起一個請求，并將其分配給一個變量 request。然后，在需要取消請求的位置，我們通過調用 request.cancel() 方法來發(fā)送取消請求信號。如果請求已經被取消，則會拋出一個包含取消原因的錯誤，并且您可以在 catch 塊中檢查這個錯誤并處理它。

到此這篇關于JavaScript兩種axios取消請求方式小結的文章就介紹到這了,更多相關JavaScript axios取消請求內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: