axios 封装避免重复请求（两种）

于 2024-08-13 09:20:06 发布
阅读量1.4k 收藏 21
点赞数 11
文章标签： 前端 javascript 开发语言 ajax vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z001126/article/details/141152580
版权

目录

前言

Demo

第一种实现方法

第二种方法（axios版本0.22.0以上）

前言

在当今的前端开发领域，数据交互是不可或缺的一环。Axios 作为一款基于 Promise 的 HTTP 客户端，因其简洁的 API 和丰富的配置选项，深受广大开发者的喜爱。然而，在实际项目中，我们常常会遇到一个问题：重复发送相同的请求，这不仅会浪费网络资源，还可能导致服务器压力增大。为了提高应用的性能和用户体验，我们需要对 Axios 进行封装，以避免重复请求的问题。

本文将详细介绍两种封装 Axios 的方案，帮助您有效地避免重复请求，提升项目质量。我们将从实际场景出发，分析问题原因，并提供具体的实现步骤和代码示例。无论您是初入前端的新手，还是经验丰富的开发者，相信都能从中获得启发。

让我们一起探索如何优雅地封装 Axios，让数据交互更加高效、稳定！

Demo

​ 项目demo地址：cancelRequest: 避免重复调用接口的demo ​icon-default.png?t=N7T8https://gitee.com/zhp26zhp/cancel-request

第一种实现方法

通过生成请求的唯一标识符（key），来避免重复发送相同的请求。（发布订阅模式）

定义了一个EventEmitter类，用于实现发布订阅模式。它允许在请求成功或失败时，通知所有订阅了该请求的回调函数。

class EventEmitter {
    constructor() {
        this.event = {}
    }
    on(type, cbres, cbrej) {
        if (!this.event[type]) {
            this.event[type] = [[cbres, cbrej]]
        } else {
            this.event[type].push([cbres, cbrej])
        }
    }

    emit(type, res, ansType) {
        if (!this.event[type]) return
        else {
            this.event[type].forEach(cbArr => {
                if(ansType === 'resolve') {
                    cbArr[0](res)
                }else{
                    cbArr[1](res)
                }
            });
        }
    }
}

生成请求Key

function generateReqKey(config, hash) {
    const { method, url, params, data } = config;
    return [method, url, JSON.stringify(params), JSON.stringify(data), hash].join("&");
}

存储已发送但未响应的请求

const pendingRequest = new Set();
const ev = new EventEmitter()

请求拦截器中，在请求发送前，生成请求Key，并检查是否已有相同的请求在等待响应。如果有，则通过发布订阅模式挂起该请求，直到收到响应。如果没有，则将请求Key添加到pendingRequest中。

instance.interceptors.request.use(async (config) => {
    let hash = location.hash
    let reqKey = generateReqKey(config, hash)
    
    if(pendingRequest.has(reqKey)) {
        let res = null
        try {
          res = await new Promise((resolve, reject) => {
                    ev.on(reqKey, resolve, reject)
                })
          return Promise.reject({
                    type: 'limiteResSuccess',
                    val: res
                })
        }catch(limitFunErr) {
            return Promise.reject({
                        type: 'limiteResError',
                        val: limitFunErr
                    })
        }
    }else{
        config.pendKey = reqKey
        pendingRequest.add(reqKey)
    }

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

 响应拦截器中，在请求成功或失败时，通过handleSuccessResponse_limit和handleErrorResponse_limit函数处理响应，并发布订阅通知

instance.interceptors.response.use(function (response) {
    handleSuccessResponse_limit(response)
    return response;
  }, function (error) {
    return handleErrorResponse_limit(error)
  });

将成功响应的结果发布给所有订阅了该请求的回调函数。

function handleSuccessResponse_limit(response) {
      const reqKey = response.config.pendKey
    if(pendingRequest.has(reqKey)) {
      let x = null
      try {
        x = JSON.parse(JSON.stringify(response))
      }catch(e) {
        x = response
      }
      pendingRequest.delete(reqKey)
      ev.emit(reqKey, x, 'resolve')
      delete ev.reqKey
    }
}

将错误响应的结果发布给所有订阅了该请求的回调函数。

function handleErrorResponse_limit(error) {
    if(error.type && error.type === 'limiteResSuccess') {
      return Promise.resolve(error.val)
    }else if(error.type && error.type === 'limiteResError') {
      return Promise.reject(error.val);
    }else{
      const reqKey = error.config.pendKey
      if(pendingRequest.has(reqKey)) {
        let x = null
        try {
          x = JSON.parse(JSON.stringify(error))
        }catch(e) {
          x = error
        }
        pendingRequest.delete(reqKey)
        ev.emit(reqKey, x, 'reject')
        delete ev.reqKey
      }
    }
      return Promise.reject(error);
}

 完整代码如下：

import axios from "axios"

let instance = axios.create({
    baseURL: 'http://localhost:3001', // api 的 base_url
    timeout: 50e3, // request timeout
})

// 发布订阅
class EventEmitter {
    constructor() {
        this.event = {}
    }
    on(type, cbres, cbrej) {
        if (!this.event[type]) {
            this.event[type] = [[cbres, cbrej]]
        } else {
            this.event[type].push([cbres, cbrej])
        }
    }

    emit(type, res, ansType) {
        if (!this.event[type]) return
        else {
            this.event[type].forEach(cbArr => {
                if(ansType === 'resolve') {
                    cbArr[0](res)
                }else{
                    cbArr[1](res)
                }
            });
        }
    }
}


// 根据请求生成对应的key
function generateReqKey(config, hash) {
    const { method, url, params, data } = config;
    return [method, url, JSON.stringify(params), JSON.stringify(data), hash].join("&");
}

// 存储已发送但未响应的请求
const pendingRequest = new Set();
// 发布订阅容器
const ev = new EventEmitter()

// 添加请求拦截器
instance.interceptors.request.use(async (config) => {
    let hash = location.hash
    // 生成请求Key
    let reqKey = generateReqKey(config, hash)
    
    if(pendingRequest.has(reqKey)) {
        // 如果是相同请求,在这里将请求挂起，通过发布订阅来为该请求返回结果
        // 这里需注意，拿到结果后，无论成功与否，都需要return Promise.reject()来中断这次请求，否则请求会正常发送至服务器
        let res = null
        try {
            // 接口成功响应
          res = await new Promise((resolve, reject) => {
                    ev.on(reqKey, resolve, reject)
                })
          return Promise.reject({
                    type: 'limiteResSuccess',
                    val: res
                })
        }catch(limitFunErr) {
            // 接口报错
            return Promise.reject({
                        type: 'limiteResError',
                        val: limitFunErr
                    })
        }
    }else{
        // 将请求的key保存在config
        config.pendKey = reqKey
        pendingRequest.add(reqKey)
    }

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

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 将拿到的结果发布给其他相同的接口
    handleSuccessResponse_limit(response)
    return response;
  }, function (error) {
    return handleErrorResponse_limit(error)
  });

// 接口响应成功
function handleSuccessResponse_limit(response) {
      const reqKey = response.config.pendKey
    if(pendingRequest.has(reqKey)) {
      let x = null
      try {
        x = JSON.parse(JSON.stringify(response))
      }catch(e) {
        x = response
      }
      pendingRequest.delete(reqKey)
      ev.emit(reqKey, x, 'resolve')
      delete ev.reqKey
    }
}

// 接口走失败响应
function handleErrorResponse_limit(error) {
    if(error.type && error.type === 'limiteResSuccess') {
      return Promise.resolve(error.val)
    }else if(error.type && error.type === 'limiteResError') {
      return Promise.reject(error.val);
    }else{
      const reqKey = error.config.pendKey
      if(pendingRequest.has(reqKey)) {
        let x = null
        try {
          x = JSON.parse(JSON.stringify(error))
        }catch(e) {
          x = error
        }
        pendingRequest.delete(reqKey)
        ev.emit(reqKey, x, 'reject')
        delete ev.reqKey
      }
    }
      return Promise.reject(error);
}

export default instance;

调用接口例子

export function getWetherByOneExample() {
  return instance.get('/data')
}

第二种方法（axios版本0.22.0以上）

  • isCancel：从axios中提取用于判断请求是否被取消的方法。
  • cacheRequest：用于存储请求的AbortController实例，以便后续取消请求。
const { isCancel } = axios;
const cacheRequest = {};
  • abortCacheRequest：根据请求的唯一标识reqKey取消请求。
function abortCacheRequest(reqKey) {
  if (cacheRequest[reqKey]) {
    console.log("abortCacheRequest", reqKey);
    cacheRequest[reqKey].abort();
    delete cacheRequest[reqKey];
    console.log("abortCacheRequest", cacheRequest);
  }
}
  • 在请求发送前，检查config中是否包含isAbort字段，如果为true，则取消之前的相同请求。
  • 使用AbortController来取消请求，并将signal属性添加到config中。
service.interceptors.request.use(
  (config) => {
    const { url, method, isAbort = false } = config;
    if (isAbort) {
      const reqKey = `${url}&${method}`;
      abortCacheRequest(reqKey);
      const controller = new AbortController();
      config.signal = controller.signal;
      cacheRequest[reqKey] = controller;
    }
    return config;
  },
  (error) => {
    console.log(error); // for debug
    return Promise.reject(error);
  }
);
  • 在响应返回后，如果请求被取消，则从缓存中删除对应的请求。
  • 处理响应错误，如果请求被取消，则返回自定义的错误信息；否则，显示错误消息并返回错误对象。
service.interceptors.response.use(
  (response) => {
    const { url, method, isAbort = false } = response.config;
    if (isAbort) delete cacheRequest[`${url}&${method}`];
    const res = response.data;
    return res;
  },
  (error) => {
    if (isCancel(error)) {
      return Promise.reject({
        message: "重复请求，已取消",
      });
    }
    console.log("err" + error); // for debug
    Message({
      message: "登录连接超时（后台不能连接，请联系系统管理员）",
      type: "error",
      duration: 5 * 1000,
    });
    error.data = { msg: "系统内部错误，请联系管理员维护" };
    return Promise.reject(error);
  }
);

 完整代码如下：

import axios from "axios";

const service = axios.create({
  baseURL: "http://localhost:3001", // api 的 base_url
  timeout: 500000, // request timeout
});

// isAbort Start
const { isCancel } = axios;
const cacheRequest = {};
// 删除缓存队列中的请求
function abortCacheRequest(reqKey) {
  if (cacheRequest[reqKey]) {
    // 通过AbortController实例上的abort来进行请求的取消
    console.log("abortCacheRequest", reqKey);
    cacheRequest[reqKey].abort();
    delete cacheRequest[reqKey];
    console.log("abortCacheRequest", cacheRequest);
  }
}
// isAbort End

// request interceptor
service.interceptors.request.use(
  (config) => {
    // isAbort Start
    const { url, method, isAbort = false } = config;
    if (isAbort) {
      // 请求地址和请求方式组成唯一标识，将这个标识作为取消函数的key，保存到请求队列中
      const reqKey = `${url}&${method}`;
      // 如果config传了需要清除重复请求的isAbort，则如果存在重复请求，删除之前的请求
      abortCacheRequest(reqKey);
      // 将请求加入请求队列，通过AbortController来进行手动取消
      const controller = new AbortController();
      config.signal = controller.signal;
      cacheRequest[reqKey] = controller;
    }
    // isAbort End

    return config;
  },
  (error) => {
    // Do something with request error
    console.log(error); // for debug
    Promise.reject(error);
  }
);

// response interceptor
service.interceptors.response.use(
  (response) => {
    // isAbort Start
    const { url, method, isAbort = false } = response.config;
    if (isAbort) delete cacheRequest[`${url}&${method}`];
    // isAbort End

    const res = response.data;

    return res;
  },
  (error) => {
    if (isCancel(error)) {
      // 通过AbortController取消的请求不做任何处理
      return Promise.reject({
        message: "重复请求，已取消",
      });
    }
    console.log("err" + error); // for debug
    Message({
      message: "登录连接超时（后台不能连接，请联系系统管理员）",
      type: "error",
      duration: 5 * 1000,
    });
    error.data = { msg: "系统内部错误，请联系管理员维护" };
    return Promise.reject(error);
  }
);

export default service;

调用例子

export function getWetherByTwoExample() {
  return service({
    url: '/data',
    method: 'get',
    isAbort: true
  })
}

项目demo地址：cancelRequest: 避免重复调用接口的demo

Summer不秃
关注
axios封装 防止重复请求
weixin_48830149的博客
06-25 308
// 正在进行中的请求列表 let reqList = [] /** 阻止重复请求 @param {array} reqList - 请求缓存列表 @param {string} url - 当前请求地址 @param {function} cancel - 请求中断函数 @param {string} errorMessage - 请求中断时需要显示的错误信息 */ const stopRepeatRequest = function (reqList, url, cancel, errorMessag
vue中axios封装请求
weixin_48115183的博客
05-11 6886
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) { console.log(res); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(fun
完整的Axios封装-单独API管理层、参数序列化、取消重复请求、Loading、状态码...
橙某人
09-16 769
Axios 相信对Vue熟悉的铁汁对它不会感到陌生了，这简直就是前端近年来的一大杀器，使用人数一直不断上涨。
基于Axios封装请求---防止接口重复请求解决方案
不负光阴不负自己，不负被爱不负所爱 ​
03-28 2339
重复发送请求可能导致页面长时间无响应或加载缓慢，从而影响用户的体验。特别是在网络不稳定或请求处理时间较长的情况下，这个问题尤为突出。：如果前端不限制重复请求，服务器可能会接收到大量的重复请求，这不仅增加了服务器的处理负担，还可能导致资源浪费。：对于某些操作，如表单提交，重复请求可能导致数据重复插入或更新，从而破坏数据的一致性。：在发送请求时，为请求设置一个唯一的标识符（如请求ID）。在请求处理过程中，可以通过检查该标识符来判断是否已存在相同的请求。如果存在，则取消或忽略重复请求。
axios封装对重复请求的拦截
Annie的博客
08-28 657
有些请求是不应该重复发起的，比如提交表单的post请求或刷新页面数据的get请求。当首次请求未响应时，大部分情况下不应再发起重复请求，这时就要对重复请求进行拦截。拦截操作可在axios的请求与响应拦截器中统一进行。 import axios from 'axios' import { baseURL } from '@/config' const instance = axios.create({ baseURL: baseURL, timeout: 30000 }); // 定义存放已发送...
封装Axios，实现对频繁重复请求的拦截
单眼皮丶儿的博客
08-09 1532
本文利用 axios.CancelToken Api来对接口进行全局拦截，一劳永逸，且优雅。
Axios封装：限制重复请求
weixin_52017993的博客
09-19 880
2. 再次请求该接口时，先判断map中是否存在同名key，如果存在，那么调用Abortcontroller的abort方法执行取消，反之则在map当中新增key。axios提供了两个取消请求的API，分别是CancelToken和AbortController。1. 当需要发起一个请求之前，可以先取消掉之前的请求，这样确保每次都获取到最新的响应数据，避免数据错乱。，请求这个接口的时候，拼接接口的url和参数等信息保存到一个map当中。1. 如果在当前接口设置了不允许重复请求，那么在请求拦截器中设置。
axios 封装上传文件的请求方法
10-17
在本文中，我们将深入探讨如何使用axios库封装一个用于上传文件的请求方法。axios是一个基于 promise 的 HTTP 库，可以在浏览器和 node.js 中使用，它的功能强大且易于使用。与传统的 AJAX 请求相比，axios 提供了更...
Vue Promise的axios请求封装详解
10-18
Vue Promise的axios请求封装详解旨在介绍如何利用JavaScript中的Promise对象和axios库来实现优雅和高效的请求封装。本文将详细探讨Promise的使用方法、axios请求封装技巧，以及如何在不同环境下区分请求链接。 首先...
axios如何取消重复无用的请求详解
10-15
总结来说，通过以上两种方式，我们可以有效地管理axios发起的HTTP请求，避免重复无用的请求影响前端性能和后端资源。这要求开发者在实际开发中，根据不同的业务场景选择合适的取消策略，并通过良好的封装来提高代码...
封装 axios+promise通用请求函数操作
10-14
封装这样的通用请求函数的好处在于，它可以统一处理请求、响应和错误，避免在每个组件或服务中重复相同的操作。此外，由于它支持加载指示器，因此可以提高用户体验，让用户知道后台正在处理数据请求。 总之，封装...
如何避免接口重复请求(axios推荐使用AbortController)
最新发布
零凌林的博客
06-18 1061
针对于axios，过滤重复请求，我们已经不再推荐使用防抖、节流。而是更推荐使用AbortController去实现这一需求。诸如alova请求库本身就有这种功能，也是很不多的选择
前端页面使用axios解决发相同重复的请求
qq_45532769的博客
03-29 703
有很多时候请求慢导致疯狂点击发送请求，使得后端压力大，所有我希望在发送相同的请求时避免重复请求，可以使用axios的interceptors来拦截相同的请求并取消它们。提示：下面直接上代码。
如果防止axios发送重复请求
qq_46030141的博客
07-07 672
项目优化
axios拦截重复请求
qq_42031498的博客
12-04 512
不多BB直接上代码 import axios from 'axios'; /* 初始化axios实例 */ const service = axios.create({ baseURL: process.env.VUE_APP_BASEURL, headers: {'Content-Type': 'application/json'}, timeout: 10 * 1000, withCredentials: true }) 需要注意的点，请看注释 /* 拦截重复请求 */
axios 拦截重复请求
热门推荐
萝卜砸大坑
07-21 1万+
一直想封装一下 axios， 可以方便项目中使用，今天刚好 看到一位大佬的文章，就保存了过来，方便下次使用 axios配置文件 import axios from 'axios' axios.defaults.timeout = 15000 // 拦截重复请求 const pending = {} const CancelToken = axios.CancelToken const removePending = (key, isRequest = false) => { if (pendi
axios取消重复请求（typeScript）
Call_me_small_pure的博客
12-05 1345
建议对照着axios官网进行学习 import axios from 'axios'; // 取消请求 const CancelToken = axios.CancelToken; // 设置默认请求头，如果不需要可以取消这一步 axios.defaults.headers = { 'Content-Type': 'application/x-www-form-urlencoded;...
最简单的 6 种防止数据重复提交的方法
weijia521的博客
10-23 1109
最简单的 6 种防止数据重复提交的方法！(干货) 有位朋友，某天突然问磊哥：在 Java 中，防止重复提交最简单的方案是什么？ 这句话中包含了两个关键信息，第一：防止重复提交；第二：最简单。 于是磊哥问他，是单机环境还是分布式环境？ 得到的反馈是单机环境，那就简单了，于是磊哥就开始装*了。 话不多说，我们先来复现这个问题。 模拟用户场景 根据朋友的反馈，大致的场景是这样的，如下图所示： 简化的模拟代码如下（基于 Spring Boot）： importorg.springfr..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值