vue-axios-重复请求的优化

一、vue-axios-重复请求的优化

• 背景

  项目上线之后，经常会接受到客户反馈说：点击这个那个提交按钮报错了，排查原因结果发现，在相差毫秒级的时间里，请求提交了两次，导致了异常。

• 原因

  多方面的原因：

  • 我们知道页面按钮被点击是有一定的延迟时间的，只要在这延迟时间内，多次点击就会产生多次请求，比如移动端的300ms延迟。
  • 事件混乱造成的，比如事件叠加

• 解决方案

  思路：

  • 我可不可以把每次请求先存在一个地方，下一次请求到缓存的地方去比较，如果存在相同的请求，不再发送请求。直到本次请求完成之后，再去删除缓存中的请求。

  • 有人会说这么做会不会有性能方面的问题，或者安全方面的问题，至于性能，我是觉得可以忽略不计，现在基本都是CSR模式，客户端渲染页面，对于客户来说，这些微小的差距，基本可以忽略不计。其次是安全，因为是存在变量中，除非内存泄漏，不然也不会出现安全问题。

  思考：

  • 考虑一个问题：
    • 怎么能表示唯一的请求【带时间戳的请求+参数+方法】

  动手：

  • 将唯一的请求拼接成一个字符串作为一个map中的一个key
  • 在请求开始的时候，进行判断，map中是否存在这个key
  • 如果不存在，则存放map
  • 如果存在就直接返回错误消息，告诉用户不可重复点击
  • 请求最后，删除map中的请求。