1.需求场景背景

相信各位前端开发的小伙伴都会遇到这样的需求,点击一个按钮触发接口后,响应之前不允许再点击.

2.常用方案

偷懒的方案

直接给按钮加个防抖功能.正常接口响应快的话该方案是没有问题的.但是接口往往都没法如愿的快.比如5s,10s才响应,用户看不到响应一般都会疯狂再点点点.防抖时间很难动态控制

一般人方案

一般采用的方案就是加一个loading变量,在请求响应前后去控制变量loading为true和false.这种方案本身并没有任何问题,但是当项目中有很多这种需求,处理起来就会变得非常繁琐.

进阶方案

我们对button动点歪心思,让一切变得简单.上代码,这边用的vue单文件组件作为示例

使用时我们只要click方法返回是个promise即可,其他一切如常.用法如下