支付前端防重踩的坑

前端交互流程

前端先detail接口，支付状态为new，用户可以点击pay按钮 ----> 用户点击按钮，调用pay接口 ---> 前端置灰pay按钮&展示loading弹窗 ----> pay成功/失败，loading取消，调用detail接口获取新的支付数据 ----> detail接口返回支付状态不为new，支付按钮不可点击

存在的问题

pay接口返回结果后，loading弹窗就取消了，前端就再次展示出了pay按钮，pay按钮的重新置灰是依赖detail接口返回的状态，当detail接口响应比较慢的时候，用户可以在次点击pay按钮，出现重复提交。

解决

detail接口返回后，在取消loading弹窗

总结

1、前端防重的思路需要前后端一起review一下避免出现前端做了防重但是防重不够彻底。