【前端】vue--复制三级模板功能

前言

小编最近遇到一个业务逻辑复杂的前端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延迟加载的效果，最后实现功能。

感谢您的访问！

【前端】vue--复制三级模板功能

前言

使用延迟SetTimeOut

使用递归方法复制模板

小结

猜你喜欢