vue如何保证同一个接口不出现重复请求

Vue通过axios库来发送HTTP请求，可以使用axios的拦截器来避免重复请求。在发送请求时，可以添加一个“标记”，每次发送请求前先检查是否已经有相同标记的请求在等待响应，如果有，则直接返回缓存的结果，而不发送新的请求。具体的代码实现可以参考以下步骤：

1. 在vue中使用axios发送HTTP请求

import axios from 'axios'
const request = axios.create({
  baseURL:'http://localhost:3000'
})

2. 设置请求拦截器，为每个请求添加一个唯一标识

let pendingRequest = []
let cancelToken = axios.CancelToken;
let removePendingRequest = (config) => {
  for(let p in pendingRequest) {
    if(pendingRequest[p].u === `${config.url}&${config.method}`) {
      pendingRequest[p].f()
      pendingRequest.splice(p, 1)
    }
  }
}

request.interceptors.request.use(
  config => {
      removePendingRequest(config)
      config.cancelToken = new cancelToken(c => {
        pendingRequest.push({ u: `${config.url}&${config.method}`, f: c })
      })
      return config
  },
  error => {
      return Promise.reject(error)
  })

request.interceptors.response.use(
  response => {
      removePendingRequest(response.config)
      return response
  },
  error => {
      return Promise.reject(error)
  })

3. 在发送请求时，设置是否需要去重

// 需要保证同一个接口不出现重复请求
request.get('url', {
  params: {
    name:'xxx'
  },
  // 是否开启去重
  isDedupe:true 
})

这样就可以在vue中保证同一个接口不会出现重复请求了。