如何在 Axios 中主动中断请求并处理中断状态？

Question

在使用 Axios 进行网络请求时，如何主动中断请求并妥善处理中断状态是一个常见的技术问题。例如，在用户快速切换页面或输入新查询时，之前的请求可能已无意义，继续执行会浪费资源。此时可以通过 Axios 的 `CancelToken` 功能来实现请求的中断。 具体操作中，创建一个 `CancelToken` 对象，并将其传递给 Axios 请求配置。当需要中断请求时，调用 `cancelToken.source.cancel()` 方法即可。需要注意的是，中断后必须正确捕获和处理 `AxiosError`，以确保应用稳定性。如果未正确处理中断状态，可能会引发错误提示或逻辑混乱。 此外，管理多个可中断的请求（如搜索建议或无限滚动加载）时，应确保每次新请求前取消上一个请求，避免资源占用过多。这种场景下，合理设计取消逻辑是关键所在。

Answer 1

1. Axios 请求中断的背景与常见问题

在现代前端开发中，网络请求是不可或缺的一部分。然而，在实际应用中，用户的行为可能会导致某些请求变得无意义。例如，当用户快速切换页面或输入新的查询时，之前的请求可能已经过时，继续执行这些请求会浪费资源。

为了解决这一问题，Axios 提供了 `CancelToken` 功能，用于主动中断请求。如果不正确处理中断状态，可能会引发错误提示或逻辑混乱，影响用户体验和应用性能。

• 场景一：用户快速切换页面，旧请求无需响应。
• 场景二：输入框搜索建议，新请求覆盖旧请求。
• 场景三：无限滚动加载，避免重复加载数据。

2. 使用 CancelToken 中断请求的基本操作

通过 `CancelToken`，我们可以轻松实现请求的中断功能。以下是基本的实现步骤：

1. 创建一个 `CancelToken` 对象。
2. 将 `CancelToken` 传递给 Axios 请求配置。
3. 调用 `cancel()` 方法中断请求。

import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancelSource = CancelToken.source();

axios.get('/api/data', {
    cancelToken: cancelSource.token
}).catch(function (thrown) {
    if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
    } else {
        // 处理其他错误
    }
});

// 当需要取消请求时
cancelSource.cancel('Operation canceled by the user.');
    

3. 管理多个可中断的请求

在复杂的场景下，如搜索建议或无限滚动加载，通常会有多个并发请求。此时，合理设计取消逻辑至关重要。

以下是一个示例，展示如何确保每次新请求前取消上一个请求：

步骤	操作
1	初始化一个全局的 `cancelSource`。
2	在每次发起新请求前，检查是否存在旧的 `cancelSource` 并调用其 `cancel()` 方法。
3	更新 `cancelSource` 并发起新请求。

4. 错误处理与稳定性保障

中断请求后，必须正确捕获和处理 `AxiosError`，以确保应用的稳定性。以下是一个流程图，描述了中断请求后的错误处理逻辑：

graph TD;
            A[发起请求] --> B{请求是否被中断};
            B -- 是 --> C(捕获 AxiosError);
            B -- 否 --> D(正常处理响应);
            C --> E(记录日志或提示用户);

通过上述流程，可以有效避免因未处理中断状态而引发的错误提示或逻辑混乱。

5. 高级优化与实践

在实际项目中，可以结合 React 的 useEffect 或 Vue 的生命周期钩子来管理请求的中断逻辑。例如，在组件卸载时自动取消未完成的请求：

useEffect(() => {
    let cancelSource = axios.CancelToken.source();

    const fetchData = async () => {
        try {
            const response = await axios.get('/api/data', { cancelToken: cancelSource.token });
            console.log(response.data);
        } catch (error) {
            if (axios.isCancel(error)) {
                console.log('Request canceled during component unmount');
            } else {
                console.error('Fetch error:', error);
            }
        }
    };

    fetchData();

    return () => {
        cancelSource.cancel('Component unmounted');
    };
}, []);
    

这种做法不仅提升了代码的可维护性，还减少了不必要的资源消耗。