使用 Axios 实现请求去重

在现代 Web 开发中,避免重复的网络请求是一个常见的需求,特别是在处理用户交互时,例如按下按钮或滚动列表。如果不加以控制,可能会导致多次相同请求的发出,浪费服务器资源或造成响应混乱。本文将指导你如何使用 Axios 来实现请求去重,并提供详细的步骤和代码示例。

流程概述

在实现 Axios 请求去重的过程中,我们可以定义一个请求缓存来存储已发送的请求。当新的请求发出时,我们可以检查这个缓存,如果请求已经发送过,则返回缓存的响应,而不是重新发送网络请求。下面是实现的步骤。

步骤 描述
1 创建 Axios 实例和请求缓存
2 拦截请求并检查缓存
3 发送请求并将响应缓存到请求缓存中
4 实现请求去重函数

实现步骤详细解析

第一步:创建 Axios 实例和请求缓存

首先,我们需要创建一个 Axios 实例,并定义一个对象来存储已发送请求的缓存。

// 引入 Axios
import axios from 'axios';

// 创建 Axios 实例
const axiosInstance = axios.create();

// 创建请求缓存
const requestCache = {};

第二步:拦截请求并检查缓存

接下来,我们需要在发送请求之前,检查该请求是否已存在于缓存中。如果存在,则直接返回缓存的数据,否则继续发送请求。

// 添加请求拦截器
axiosInstance.interceptors.request.use(config => {
    const cacheKey = `${config.method}-${config.url}`;

    // 检查缓存
    if (requestCache[cacheKey]) {
        // 如果缓存中有请求,返回缓存的 Promise
        return Promise.reject(new axios.Cancel(`Request ${cacheKey} is duplicated.`));
    }

    // 如果没有,标记此请求为已发送
    requestCache[cacheKey] = true;

    // 返回请求配置
    return config;
});

第三步:发送请求并将响应缓存到请求缓存中

在发送请求后,我们需要处理响应并将数据缓存到我们的请求缓存中,以备后用。

// 添加响应拦截器
axiosInstance.interceptors.response.use(response => {
    const cacheKey = `${response.config.method}-${response.config.url}`;

    // 当请求完成后,我们清除缓存
    delete requestCache[cacheKey];

    // 返回响应数据
    return response.data; // 返回请求的具体数据
}, error => {
    if (axios.isCancel(error)) {
        // 如果是重复请求,处理取消的情况
        console.warn(error.message);
    }
    // 返回错误信息
    return Promise.reject(error);
});

第四步:实现请求去重函数

最后,我们可以定义一个函数来发起实际的请求,使用我们之前创建的 Axios 实例。

// 发起请求的函数
const fetchData = async (url, method = 'GET') => {
    try {
        const response = await axiosInstance({ url, method });
        console.log(response); // 打印响应
    } catch (error) {
        console.error(error); // 处理错误
    }
};

// 使用示例:取消重复请求
fetchData('
fetchData(' // 这个请求会被阻止

甘特图

通过以下甘特图,我们可以清晰地了解整个实现过程的时间安排。

gantt
    title Axios 去重请求实现时间表
    dateFormat  YYYY-MM-DD
    section 初始化
    创建 Axios 实例             :done, 2023-10-01, 1d
    创建请求缓存               :done, 2023-10-01, 1d
    section 拦截器添加
    请求拦截器添加             :done, 2023-10-02, 1d
    响应拦截器添加             :done, 2023-10-02, 1d
    section 请求函数实现
    实现请求去重函数           :done, 2023-10-03, 1d

结论

通过以上步骤,你已成功实现了使用 Axios 进行请求去重的功能。现在,无论用户如何快速点击或者发出多次相同请求,后端都只会接收到一次请求,极大地节省了网络资源和提高了应用的性能。希望这一简单但有效的策略能够帮助你在今后的项目中实现更加高效的数据处理。