版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/85008370
前言
小编最近遇到一个业务逻辑复杂的前端vue的功能,复制有三级内容的模板。里面会请求多次后端,创建新的对应级别模板。这时候会遇到顺序执行时,请求后端的数据会没有时间去执行,导致产生的数据混乱。
使用延迟SetTimeOut
一、复制模板后再重新查询模板数据,需要添加延迟
//1 生成一级模板
var url = "performance-web/templetAppraise/addTemplet";
axios.post(url, vm.formValidate)
.then(function(response) {
//获取复制模板id
vm.newTempletId=response.data.templetId;
// 2 获取所复制模板的考核内容、考核标准
axios
.get("performance-web/templetAppraise/queryTempletByTemplet/" +vm.templetId)
.then(function(response) {
var dataTemplet=response.data.data;
// 3 生成二三级模板内容
if (dataTemplet!=null && dataTemplet.length>0) {
vm.copyContents(dataTemplet,contentNum);
}
});
});
/**
*添加延迟的方法
*/
setTimeout(function() {
vm.queryParentTemplet();
vm.getSelectedRules(vm.newTempletId);
vm.$Notice.open({
title: "复制模板成功",
duration: 2 //2秒后消失
});
vm.formValidate.name ="";
},2000);
二、请求后端数据方法后,需要添加延迟
axios
.post("performance-web/templetAppraise/create", vm.formValidate)
.then(function(response){
vm.newContentId=response.data.id;
if (templetRule!=null && templetRule.length>0) {
vm.copyRules(templetRule,ruleNum);
}
});
/**
*添加延迟的方法
*/
setTimeout(function(){
contentNum++;
vm.copyContents(dataTemplet,contentNum);
},500);
使用递归方法复制模板
递归方法--产生二三级模板内容,代码如下:
//复制二级模板--递归
copyContents(dataTemplet,contentNum) {
var vm = this;
const ruleNum=0;
var templetRule=[];
if (contentNum<dataTemplet.length) {
vm.formValidate.name = dataTemplet[contentNum].name;
vm.formValidate.parentId = vm.newTempletId;
vm.formValidate.templetId = vm.newTempletId;
vm.formValidate.type = 1;
templetRule = dataTemplet[contentNum].templetAppraiseEntityList;
axios
.post("performance-web/templetAppraise/create", vm.formValidate)
.then(function(response){
vm.newContentId=response.data.id;
if (templetRule!=null && templetRule.length>0) {
vm.copyRules(templetRule,ruleNum);
}
});
setTimeout(function(){
contentNum++;
vm.copyContents(dataTemplet,contentNum);
},500);
}
}
小结
在实现模板复制的过程中,自己尝试过很多方法,还使用过异步同步new Promise(()=>{})的方法,结果没有生效;使用过while循环和for循环遍历请求后端数据,结果因为数据执行时间长短的区别,导致复制模板失败或者一直卡顿,原因是index++的语句不能放在请求后端数据的方法中或之后。
最后尝试使用if语句的递归方法调用和setTimeout延迟加载的效果,最后实现功能。
扫描二维码关注公众号,回复:
5045360 查看本文章
感谢您的访问!