基于Axios封装请求---防止接口重复请求解决方案

 一、引言

前端接口防止重复请求的实现方案主要基于以下几个原因：

1. 用户体验：重复发送请求可能导致页面长时间无响应或加载缓慢，从而影响用户的体验。特别是在网络不稳定或请求处理时间较长的情况下，这个问题尤为突出。

2. 服务器压力：如果前端不限制重复请求，服务器可能会接收到大量的重复请求，这不仅增加了服务器的处理负担，还可能导致资源浪费。

3. 数据一致性：对于某些操作，如表单提交，重复请求可能导致数据重复插入或更新，从而破坏数据的一致性。

为了实现前端接口防止重复请求，可以采取以下方案：

1. 设置请求标志：在发送请求时，为请求设置一个唯一的标识符（如请求ID）。在请求处理过程中，可以通过检查该标识符来判断是否已存在相同的请求。如果存在，则取消或忽略重复请求。

2. 使用防抖（debounce）和节流（throttle）技术：这两种技术都可以用来限制函数的执行频率。防抖是在一定时间间隔内只执行一次函数，而节流是在一定时间间隔内最多执行一次函数。这两种技术可以有效防止用户频繁触发事件导致的重复请求。

3. 取消未完成的请求：在发送新的请求之前，可以检查是否存在未完成的请求。如果存在，则取消这些请求，以避免重复发送。这通常可以通过使用Promise、AbortController等技术实现。

4. 前端状态管理：使用状态管理工具（如Redux、Vuex等）来管理请求状态。在发送请求前，检查状态以确定是否已存在相同的请求。这种方案可以更加灵活地控制请求的行为。

5. 后端接口设计：虽然前端可以采取措施防止重复请求，但后端接口的设计也非常重要。例如，可以为接口设置幂等性，确保即使多次调用接口也不会产生副作用。此外，还可以使用令牌（token）等机制来限制请求的重复发送。

综合使用这些方案，可以有效地防止前端接口的重复请求，提高用户体验和系统的稳定性。

 二、取消未完成的请求

  1、Axios内置的 axios.CancelToken

import type { AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
import axios from 'axios'

const CancelToken = axios.CancelToken
const queue: any = [] // 请求队列

const service = axios.create({
  baseURL: '/api',
  timeout: 10 * 60 * 1000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
  },
})

// 取消重复请求
const removeRepeatRequest = (config: AxiosRequestConfig) => {
  for (const key in queue) {
    const index = +key
    const item = queue[key]

    if (
      item.url === config.url &&
      item.method === config.method &&
      JSON.stringify(item.params) === JSON.stringify(config.params) &&
      JSON.stringify(item.data) === JSON.stringify(config.data)
    ) {
      // 执行取消操作
      item.cancel('操作太频繁，请稍后再试')
      queue.splice(index, 1)
    }
  }
}

// 请求拦截器
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    removeRepeatRequest(config)

    config.cancelToken = new CancelToken(c => {
      queue.push({
        url: config.url,
        method: config.method,
        params: config.params,
        data: config.data,
        cancel: c,
      })
    })
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse): any => {
    removeRepeatRequest(response.config)

    return Promise.resolve(response)
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

 2、发布订阅方式