Axios请求拦截器中取消请求

在开发Web应用时，我们经常需要使用Axios库来发送HTTP请求。Axios是一个基于Promise的HTTP客户端，它支持浏览器和node.js。在某些情况下，我们可能需要在请求发送之前取消它。例如，用户在输入搜索关键词时，可能需要取消上一个未完成的请求，以避免发送重复的请求。

旅行图

在开始编写代码之前，让我们先通过旅行图来理解取消请求的过程。

journey
    A[用户输入关键词] --> B[发送请求]
    B --> C[请求发送中]
    A --> D[用户再次输入]
    D --> E[取消上一个请求]
    E --> F[发送新请求]

Axios请求拦截器

Axios提供了一个拦截器（Interceptor）机制，允许我们在请求发送之前或响应返回之后执行一些操作。我们可以通过创建一个请求拦截器来取消请求。

创建请求拦截器

以下是创建请求拦截器并取消请求的示例代码：

import axios from 'axios';

// 创建一个axios实例
const instance = axios.create();

// 创建一个取消令牌
let cancelTokenSource = axios.CancelToken.source();

// 添加请求拦截器
instance.interceptors.request.use(config => {
    // 检查是否有取消令牌
    if (cancelTokenSource) {
        // 取消上一个请求
        cancelTokenSource.cancel('Operation canceled by the user.');
    }

    // 创建一个新的取消令牌并将其添加到请求配置中
    cancelTokenSource = axios.CancelToken.source();
    config.cancelToken = cancelTokenSource.token;

    return config;
}, error => {
    return Promise.reject(error);
});

// 发送请求
instance.get('
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        if (axios.isCancel(error)) {
            console.log('Request canceled', error.message);
        } else {
            console.error('Error:', error);
        }
    });

// 取消请求
setTimeout(() => {
    cancelTokenSource.cancel();
}, 2000);

序列图

下面是一个描述取消请求的序列图。

sequenceDiagram
    participant U as 用户
    participant I as Axios实例
    participant R as 请求拦截器
    participant C as 取消令牌

    U->>I: 发送请求
    I->>R: 添加请求拦截器
    R->>C: 创建取消令牌
    R->>I: 返回配置
    U->>I: 再次发送请求
    I->>R: 添加请求拦截器
    R->>C: 取消上一个请求
    R->>I: 返回配置
    I->>U: 发送新请求

结尾

通过使用Axios的请求拦截器，我们可以轻松地在请求发送之前取消它。这在处理用户输入或执行其他需要取消请求的操作时非常有用。希望本文能帮助你更好地理解如何在Axios中取消请求。