1. 使用 fetch 的取消请求

fetch 使用 AbortController 提供取消请求的功能。

示例代码

javascript">let currentController = null;function fetchWithCancel(url) {// 如果有上一个请求，则取消它if (currentController) {currentController.abort();}// 创建新的 AbortControllercurrentController = new AbortController();const signal = currentController.signal;fetch(url, { signal }).then(response => response.json()).then(data => {console.log("fetch 数据：", data);}).catch(error => {if (error.name === "AbortError") {console.log("fetch 请求被取消");} else {console.error("fetch 请求出错：", error);}});
}// 示例调用
fetchWithCancel("https://api.example.com/data");
fetchWithCancel("https://api.example.com/otherdata"); // 取消第一个请求

2. 使用 axios 的取消请求

axios 使用 CancelToken 提供取消请求的功能。CancelToken 是基于 Promise 的实现。

示例代码

javascript">let currentCancelToken = null;function axiosWithCancel(url) {// 如果有上一个请求，则取消它if (currentCancelToken) {currentCancelToken.cancel("axios 请求被取消");}// 创建新的 CancelTokencurrentCancelToken = axios.CancelToken.source();axios.get(url, {cancelToken: currentCancelToken.token,}).then(response => {console.log("axios 数据：", response.data);}).catch(error => {if (axios.isCancel(error)) {console.log(error.message); // 请求被取消} else {console.error("axios 请求出错：", error);}});
}// 示例调用
axiosWithCancel("https://api.example.com/data");
axiosWithCancel("https://api.example.com/otherdata"); // 取消第一个请求