前言
今天在开发一个页面时发现快速点击两次保存,页面的数据会全部乱掉,最后定位为前端并发问题。
一、解决思路
多次快速点击保存,js会并发执行,如果在保存以前js有做业务处理,那极大可能会出问题,所以前端尽量不要处理复杂的业务逻辑,业务逻辑尽量放后端处理。
解决思路主要是想办法让前端不要出现并发的场景,我这边选择的是加锁,也就是在js进入保存方法之后加锁,后端处理完返回后解锁。
二、实现代码示例
save() {
var _this = this;
// 加锁,防止多次快速点击并发处理出现问题
if (_this.lock){
// 如果已加锁,忽略这次保存
return ;
}
_this.lock = true
// 业务逻辑处理
.......
_this.$ysHttp.post(_this.$urls.url, _this.$route.query, data)
.then((result) => {
// 返回数据处理
.......
// 处理完成后解锁
_this.lock = false;
});
},
总结
- 前端尽量不要实现复杂逻辑,前端只做页面的展示和操作就行
- 如果必须要解决,就利用加锁思路处理避免重复点击