如何用Vue指令实现防止重复发送请求的两种方法？

本文共计997个文字，预计阅读时间需要4分钟。

前端做后端管理系统，在部分接口请求时，若时间过长，需防止用户重复发起请求。假设某场景下，用户点击查询按钮后，后端响应需长时间才能返回数据。那么应避免用户重复点击。

前端做后台管控系统，在某些接口请求时间过长的场景下，需要防止用户反复发起请求。

　　假设某场景下用户点击查询按钮后，后端响应需要长时间才能返回数据。那么要规避用户返回点击查询按钮无外乎是让用户无法在合理时间内再次点击按钮。实现方式也有好几种：

　　　　1、在按钮点击发起请求后，弹个蒙层，显示个loading，等请求数据返回了将蒙层隐藏掉。

　　　　2、在按钮点击发起请求后，将按钮禁用掉，同样等数据返回了将按钮禁用解除。

　　以上是比较常见的2种方案。

　　实现上最简单的肯定是在需要的页面种在请求前和拿到数据后，单独处理。这种方案优点仅仅是简单，但是每个需要处理的页面都要单独写一串重复的代码，哪怕利用mixin也要多不少冗余代码。

　　如果是利用指令的方式仅仅需要在合适的地方加上个一条v-xxxx，其他都在指令的逻辑内统一处理。