axios处理重复请求的方法小结

更新时间：2024年03月28日 11:25:46 作者：求知若饥

这篇文章主要为大家详细介绍了如何使用发布订阅者模式来处理重复的axios请求,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

前言

首先，我们要先定义何为重复的请求？

接口地址、类型、参数相同，则视为相同的请求；
上一个请求还未返回响应结果时，又发送一个相同的请求，则视为重复请求。

其次，我们将每次请求生成一个唯一的key并缓存起来，用作判断是否已存在相同的请求。

最后，我们需要实现一个发布订阅者模式，在存在重复请求时，中断请求，并添加订阅，当之前的请求结果返回时，发布给订阅者。

还有一个问题，如何中断请求？只需在axios的请求拦截器中返回一个Promise.reject()即可，这样将会直接执行axios的响应拦截器中的错误处理方法，而不会向服务器发送请求。

技术实现

1. 生成key

根据接口的地址、类型、参数，我们可以判断是否为相同的请求，那我们可以在key中包含这些关键信息。

import { type AxiosRequestConfig } from 'axios'

const getDataType = (obj: unknown) => {
  let res = Object.prototype.toString.call(obj).split(' ')[1]
  res = res.substring(0, res.length - 1).toLowerCase()
  return res
}

const getKey = (config: AxiosRequestConfig) => {
  const { method, url, data, params } = config;
  let key = `${method}-${url}`;

  try {
    if (data && getDataType(data) === 'object') {
      key += `-${JSON.stringify(data)}`;
    } else if (getDataType(data) === 'formdata') {
      for (const [k, v] of data.entries()) {
        if (v instanceof Blob) {
          continue;
        }

        key += `-${k}-${v}`;
      }
    }
    
    if (params && getDataType(params) === 'object') {
      key += `-${JSON.stringify(params)}`;
    }
  } catch (e) {console.error(e);}
  
  return key;
};

判断参数类型是为了处理FormData、二进制等格式情况。

2. 缓存请求

我们可以创建一个全局变量来保存请求信息，在请求拦截器（发送请求之前）中将请求信息添加至全局变量，然后在响应拦截器（请求完成之后）中移除相关信息。

import axios from 'axios';

const historyRequests = new Map<string, number>()

axios.interceptors.request.use(
  (config) => {
    // 生成key
    const key = createKey(config);
    // 响应拦截器中需要用到
    config.headers.key = key;
    // 缓存请求信息
    historyRequests.set(key, 1);

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

instance.interceptors.response.use(
  (res) => {
    // 请求完成，删除缓存信息
    const key = res.config.headers.key as string;
    if (historyRequests.has(key)) {
      historyRequests.delete(key);
    }

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

3. 发布订阅者模式实现

订阅者通过注册事件到调度中心，当发布者触发事件时，由调度中心执行相应的订阅事件。

export default class EventBus<T extends Record<string | symbol, any>> {
  private listeners: Record<keyof T, ((...args: any[]) => void)[]> = {} as any

  $on<K extends keyof T>(event: K, callback: T[K]) {
    if (!this.listeners[event]) {
      this.listeners[event] = []
    }
    this.listeners[event].push(callback)
  }

  $emit<K extends keyof T>(event: K, ...args: Parameters<T[K]>) {
    const callbacks = this.listeners[event]
    if (!callbacks || callbacks?.length === 0) {
      return
    }

    callbacks.forEach((callback) => {
      callback(...args)
    })
  }

  $off<K extends keyof T>(event: K, listener?: T[K]) {
    if (!listener) {
      delete this.listeners[event]
      return
    }

    const fns = this.listeners[event]
    if (!fns || !fns.length) {
      return
    }

    const idx = fns.indexOf(listener)
    if (idx !== -1) {
      fns.splice(idx, 1)
    }
  }

  clear() {
    this.listeners = {} as any
  }
}

4. 完整代码实现

import axios, {
  type AxiosRequestConfig,
  AxiosError,
  type AxiosResponse
} from 'axios';
import { getDataType } from './utils';
import { EventBus } from './event/eventBus';

interface IBaseResponse {
  code: number;
  msg: string;
  data?: unknown;
}

const createKey = (config: AxiosRequestConfig) => {
  const { method, url, data, params } = config;
  let key = `${method}-${url}`;

  try {
    if (data && getDataType(data) === 'object') {
      key += `-${JSON.stringify(data)}`;
    } else if (getDataType(data) === 'formdata') {
      for (const [k, v] of data.entries()) {
        if (v instanceof Blob) {
          continue
        }
        key += `-${k}-${v}`;
      }
    }
    if (params && getDataType(params) === 'object') {
      key += `-${JSON.stringify(params)}`;
    }
  } catch (e) {console.error(e);}
  return key;
};

const instance = axios.create({
  baseURL: '',
  timeout: 5000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json;'
  }
});

const historyRequests = new Map<string, number>();
instance.interceptors.request.use(
  (config) => {
    const key = createKey(config);
    // 在响应拦截器中需要用到该key发布/订阅事件
    config.headers.key = key;
    // 判断是否存在相同请求，存在则中断请求
    if (historyRequests.has(key)) {
      // 为了后续方便处理中断请求超时
      config.headers.requestTime = Date.now();
      
      // 抛出错误并传递相应参数
      return Promise.reject(
        new AxiosError('Redundant request', 'ERR_REPEATED', config)
      );
    }
    historyRequests.set(key, 1);
    return config;
  },
  (error: AxiosError) => {
    return Promise.reject(error);
  }
);

const responseInterceptor = (res: AxiosResponse<IBaseResponse | Blob>) => {
  const result: [
    AxiosResponse<IBaseResponse | Blob> | undefined,
    AxiosError | undefined
  ] = [undefined, undefined];
  const data = res.data;
  // 可根据你的接口响应数据作处理，这里假设code不为200都为错误
  if (data instanceof Blob || data.code === 200) {
    result[0] = res;
  } else {
    result[1] = new AxiosError(data.msg);
  }
  return result;
};

const eventBus = new EventBus<{
  [key: string]: (
    data?: AxiosResponse<IBaseResponse | Blob>,
    error?: AxiosError
  ) => void;
}>();

instance.interceptors.response.use(
  (res) => {
    const [data, error] = responseInterceptor(res);

    // 如果存在重复请求，则发布结果，执行订阅事件
    const key = res.config.headers.key as string;
    if (historyRequests.has(key)) {
      historyRequests.delete(key);
      eventBus.$emit(key, data, error);
    }

    return data !== undefined ? data : Promise.reject(error);
  },
  (error: AxiosError) => {
    // 处理中断的重复请求
    if (error.code === 'ERR_REPEATED') {
      return new Promise((resolve, reject) => {
        const config = error.config!;
        const key = config.headers.key as string;
        const callback = (
          res?: AxiosResponse<IBaseResponse | Blob>,
          err?: AxiosError
        ) => {
          res ? resolve(res) : reject(err);
          eventBus.$off(key, callback);
        };
        // 订阅事件
        eventBus.$on(key, callback);

        // 处理超时
        const timeout = config.timeout || 5000;
        const requestTime = config.headers.requestTime as number;
        const now = Date.now();
        if (now - requestTime > timeout) {
          historyRequests.delete(key);
          const error = new AxiosError(
            `timeout of ${timeout}ms exceeded`,
            'ECONNABORTED',
            config
          );
          error.name = 'AxiosError';
          eventBus.$emit(key, undefined, error);
        }
      });
    }

    return Promise.reject(error);
  }
);

可以根据你的实际需求调整相关代码，例如：你需要对某些请求放行，则可以通过在headers中添加一个属性来控制是否允许重复请求。

以上就是axios处理重复请求的方法小结的详细内容，更多关于axios处理重复请求的资料请关注程序员之家其它相关文章！

您可能感兴趣的文章:

基于canvasJS在PHP中制作动态图表
这篇文章主要介绍了基于canvasJS在PHP中制作动态图表,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
js阻止默认右键的下拉菜单方法
下面小编就为大家分享一篇js阻止默认右键的下拉菜单方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
在layui.use 中自定义 function 的正确方法
今天小编就为大家分享一篇在layui.use 中自定义 function 的正确方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
js中使用replace方法完成某个字符的转换
这篇文章主要介绍了js中使用replace方法完成某个字符的转换,比较实用，需要的朋友可以参考下
2014-08-08
JS获取及设置TextArea或input文本框选择文本位置的方法
这篇文章主要介绍了JS获取及设置TextArea或input文本框选择文本位置的方法,涉及TextArea及input文本操作技巧,需要的朋友可以参考下
2015-03-03
js点击出现悬浮窗效果不使用JQuery插件
JQuery有很多这样的插件，但本文的这个是跟着自己的想法写的，也不知道他人是如何实现的，感兴趣的朋友可以了解下
2014-01-01
一文详解如何根据后端返回的url下载json文件
前后端分离的项目中,前端工作人员会要求后端返回指定格式的JSON数据,下面这篇文章主要给大家介绍了关于如何根据后端返回的url下载json文件的相关资料,需要的朋友可以参考下
2022-05-05
Javascript中常用类型的格式化方法小结
这篇文章主要给大家介绍了Javascript中常用类型的格式化方法，其中包括格式化浮点数、格式化有符号整数(int32)、格式化无符号整数(uint32)、格式化布尔值以及格式化字符串等，文中给出了详细的示例代码，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-12-12
JavaScript与Image加载事件(onload)、加载状态(complete)
以前写过一个图片等比缩放的Js函数，缺陷是要等到所有图片都加载完毕了，才能进行等比缩放。
2011-02-02
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
这篇文章主要介绍了JS与jQuery实现ListBox上移,下移,左移,右移操作功能,涉及javascript与jQuery的事件响应、页面元素动态操作等相关实现技巧,需要的朋友可以参考下
2018-05-05