Axios如何取消請求，其原理是什么？
作者：cqhly
Axios 取消請求的原理是基于底層網絡請求庫（如 XMLHttpRequest 或 Fetch）提供的中止機制。當調用取消令牌的 cancel 方法時，Axios 會觸發中止底層的網絡請求，從而終止正在進行的請求過程。
axios 可以通過創建一個 CancelToken 來取消一個請求,基本原理是:
- 創建一個 CancelToken 的實例,它有一個 executor 函數,可以通過調用 executor 參數中的 cancel 函數來取消請求。
- 在 axios 請求配置中指定 cancelToken 屬性,將 CancelToken 實例傳遞進去。
- 當我們需要取消請求時,調用 CancelToken 實例的 cancel() 方法即可取消對應的請求。
- axios 檢測到配置的 cancelToken 被取消,就會取消掉這個請求,并在錯誤回調中返回一個 Cancel 錯誤。axios 內部會監聽 cancelToken 實例的 cancel 信號,一旦觸發就會跳出隊列,取消對應請求的執行。示例代碼:
js
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user', {
cancelToken: source.token
}).catch(function(thrown) {
if(axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 處理錯誤
}
});
// 取消請求
source.cancel('Operation canceled by the user.');vue、React項目中如何取消
在基于 React 或 Vue 的應用中，可以通過封裝 Axios 并結合組件的狀態管理來實現取消請求的功能。下面分別介紹在 React 和 Vue 中如何實現這一點。
在 React 中的實現：
- 創建一個封裝的 Axios 實例，以便于應用中的多個組件共享相同的配置和取消令牌。
// axiosInstance.js
import axios from 'axios';
const instance = axios.create();
export default instance;- 在組件中使用這個封裝的 Axios 實例，并結合組件的狀態管理來處理取消請求的邏輯。
// YourComponent.js
import React, { useState } from 'react';
import axiosInstance from './axiosInstance';
function YourComponent() {
const [loading, setLoading] = useState(false);
const [data, setData] = useState(null);
const source = axiosInstance.CancelToken.source();
const fetchData = async () => {
try {
setLoading(true);
const response = await axiosInstance.get('/api/some-endpoint', {
cancelToken: source.token
});
setData(response.data);
setLoading(false);
} catch (error) {
if (axiosInstance.isCancel(error)) {
console.log('請求被取消：', error.message);
} else {
// 處理其他錯誤
}
setLoading(false);
}
};
const cancelRequest = () => {
source.cancel('請求被用戶取消');
};
return (
<div>
{loading ? <p>Loading...</p> : <p>{data}</p>}
<button onClick={fetchData}>Fetch Data</button>
<button onClick={cancelRequest}>取消請求</button>
</div>
);
}
export default YourComponent;在 Vue 中的實現：
- 創建一個封裝的 Axios 實例，同樣可以讓多個組件共享相同的配置和取消令牌。
// axiosInstance.js
import axios from 'axios';
const instance = axios.create();
export default instance;- 在組件中使用這個封裝的 Axios 實例，并結合組件的狀態管理來處理取消請求的邏輯。
<template>
<div>
<p v-if="loading">Loading...</p>
<p v-else>{{ data }}</p>
<button @click="fetchData">Fetch Data</button>
<button @click="cancelRequest">取消請求</button>
</div>
</template>
<script>
import axiosInstance from './axiosInstance';
export default {
data() {
return {
loading: false,
data: null,
source: axiosInstance.CancelToken.source()
};
},
methods: {
async fetchData() {
try {
this.loading = true;
const response = await axiosInstance.get('/api/some-endpoint', {
cancelToken: this.source.token
});
this.data = response.data;
this.loading = false;
} catch (error) {
if (axiosInstance.isCancel(error)) {
console.log('請求被取消：', error.message);
} else {
// 處理其他錯誤
}
this.loading = false;
}
},
cancelRequest() {
this.source.cancel('請求被用戶取消');
}
}
};
</script>原理
Axios 取消請求的原理是基于底層網絡請求庫（如 XMLHttpRequest 或 Fetch）提供的中止機制。當調用取消令牌的 cancel 方法時，Axios 會觸發中止底層的網絡請求，從而終止正在進行的請求過程。
具體來說，以下是 Axios 取消請求的原理：
- 創建 CancelToken 對象： 在發起請求之前，可以通過 axios.CancelToken.source() 方法創建一個 CancelToken 對象，并獲取其中的 token。這個 token 是一個用于標識該請求的令牌。
- 關聯 CancelToken： 將創建的 CancelToken 對象中的 token 關聯到請求的配置中，通過 cancelToken 參數。這告訴 Axios 在取消令牌觸發時要取消這個請求。
- 取消請求： 當想要取消請求時，調用 CancelToken 對象中的 cancel 方法，并提供一個取消的原因。這會觸發 Axios 內部的邏輯，導致底層的網絡請求被中止。
- 捕獲取消錯誤： 如果請求在取消前已經發出，Axios 會拋出一個名為 Cancel 的錯誤?？梢允褂?nbsp;axios.isCancel(error) 來檢查是否是取消錯誤。在 .catch 部分處理這個取消錯誤。
底層 XMLHttpRequest 和 Fetch API 都提供了終止請求的機制。當取消請求時，Axios 會調用底層網絡請求的相應中止方法，例如 xhr.abort() 或 fetch.abort()，從而使網絡請求停止并拋出取消錯誤。這個機制允許有效地取消正在進行的請求，避免不必要的數據傳輸和處理。
責任編輯：武曉燕
來源：
海燕技術棧
