用户快速点击按钮发送重复请求解决方案

前言

       在平时的项目中会经常遇到用户一直不停的点击按钮发送请求，这样就可能会造成后面的请求会报错，或者在执行添加操作时，就会添加多条一模一样的数据。造成了很不好的用户体验。那怎样解决这个问题呐，首先肯定不能阻止用户不能一直快速重复点击按钮，就只能通过代码去限制一下。以下是我整理的几种方案。

一、通过axios取消请求的特点实现

       总所周知，axios有取消请求的特点，我们可以利用这一点去实现。

       大致思路是：在请求拦截的时候将每条请求的url、methods、参数作为唯一值进行记录保存，然后等到请求响应后再将保存的这条请求记录删除掉。每次请求前都会在记录里查找有没有对应的记录，如果有就取消当前请求，没有就记录这条请求，然后发送请求。

代码实现：

util/cancel-request.js 

安装qs插件

npm i qs

import qs from 'qs' 
export default class CancelRequest {
  constructor() {
    this.pendingRequest = new Map() //创建map数据，用于存放请求列表 
  } 
  // 根据请求信息生成唯一标识key 
  geterateReqKey(config) {
    const { url, method, params, data } = config 
    //将url、method、params、data转换拼接成字符串
    return [url,method, qs.stringify(params),qs.stringify(data)].