取消网络请求

1. 使用 fetch 的取消请求

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

示例代码

let currentController = null;

function fetchWithCancel(url) {
    // 如果有上一个请求，则取消它
    if (currentController) {
        currentController.abort();
    }

    // 创建新的 AbortController
    currentController = 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 的实现。

示例代码

let currentCancelToken = null;

function axiosWithCancel(url) {
    // 如果有上一个请求，则取消它
    if (currentCancelToken) {
        currentCancelToken.cancel("axios 请求被取消");
    }

    // 创建新的 CancelToken
    currentCancelToken = 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"); // 取消第一个请求