前端数据集拖拽管理设定(await执行与执行顺序Promise返回值获取与Promise.all的使用)

[{
setName:"", //第一个数据集
setCode:"",//第一个数据集编码
setCodeList:[],//第一个数据集所有字段
setName2:""//第二个数据集
setCode2:"",//第二个数据集编码
setCode2List:[],//第二个数据集所有字段
type:"",//数据集连接方式
//field1:数据集1字段，field2：数据集2字段，operator：连接关系 a = b
field:[{field1:"",field2:"",operator:""}] 
}]

  this.dataSetDataList[index].field.push({ field1: "", field2: "", operator: "=" });

//删除数据集
 deleteData (index, fieldIndex) {
   //至少要有一个关联数据
   if (this.dataSetDataList[index].field.length == 1) {
     this.$Message.error("至少有一个关联字段，不可删除！");
     return;
   }
   //删除指定索引数据集字段
   this.dataSetDataList[index].field.splice(fieldIndex, 1)
 },

用于添加或删除指定元素
array.splice(index,howmany,item1,…,itemX)

 async checkDataSet (setCode) {
   console.log(setCode);
   let data = await this.detail(setCode);
   this.dataSet.push(data);
 }

async detail (setCode) {
    const obj = { setCode: setCode };
    //方法一：两遍return
    return await getDeatilByIdReq(obj).then((res) => {
      if (res.code === 200) {
        const data = res.result;
        return data;
      }
    });
    //方法2 设定新参数 data
    let data ="";
     await getDeatilByIdReq(obj).then((res) => {
      if (res.code === 200) {
        data = res.result;
      }
    });
    return data
  },

await作用：
开立一个新的线程，去执行await之后的方法，防止主线程假死，网页假死（浏览器出现未响应）

  watch: {
    dataBaseList () {
      this.dataBaseList.forEach((item, index) => {
        if (index + 1 !== this.dataBaseList.length) {
          const { setName, setCode } = this.dataBaseList[index + 1];
          /**
           *  一
           * 造成的原因：异步方法，同步调用，导致返回结果集为Promise:[[PromiseState]],[[PromiseResult]]
         */

          //   const setCodeList = this.detail(item.setCode).then(res => { return res });
          //   const setCode2List = this.detail(setCode).then(res => { return res });
          //   return {
          //     setCode: item.setCode,
          //     setName: item.setName,
          //     setName2: setName,
          //     setCode2: setCode,
          //     setCodeList: setCodeList,
          //     setCode2List: setCode2List,
          //     field: !(item?.field || 0) ? [{ field1: "", field2: "", operator: "=" }] : item.field
          //   }

          /** 二
           * 返回结果为空，this.detail 没执行完主线程就开始继续往下执行了
           */
          //   let setCodeList = "";
          //   let setCode2List = "";
          //   this.detail(item.setCode).then(res => { setCodeList = res });
          //   this.detail(setCode).then(res => { setCode2List = res });
          //   console.log(setCodeList); // 返回结果为空，this.detail 没执行完主线程就开始继续往下执行了


          Promise.all([this.detail(item.setCode), this.detail(setCode)]).then(res => {
            console.log(res);
            const obj = {
              setCode: item.setCode,
              setName: item.setName,
              setName2: setName,
              setCode2: setCode,
              setCodeList: res[0].setParamList,
              setCode2List: res[1].setParamList,
              field: !(item?.field || 0) ? [{ field1: "", field2: "", operator: "=" }] : item.field
            }
            this.dataSetDataList[index] = { ...obj };
            this.$nextTick(() => {
              this.dataSetDataList = JSON.parse(JSON.stringify(this.dataSetDataList));
            })
          })
        }
        else {
          this.dataSetDataList[index] = { ...item };
        }
      })

    },
  },

概念:Promise 是异步编程的一种解决方案,用同步流程将异步流程表达出来

对象状态不受外界影响，有三种状态：pending、fulfilled、rejected。只有异步 *** 作结果可以改变这个状态，任何其他 *** 作都无法改变这个 *** 作。

状态一旦改变，就不会在变，任何时候都可以得到这个结果。状态只能由 pending => fulfilled、pending => rejected。 只要这两种情况发生了，就凝固了，会一直保持。这时就称 resolved (已定型)。 如果状态已经发生改变，我们在对promise 对象添加回调函数，也会立即得到这个结果。 这与事件（event）完全不同,事件的特点是，你错过了他，再去监听，是得不到结果的。

缺点：
无法取消promise, promise一旦新建，就会立即执行，无法中途取消。
如果不设置回调函数， Promise 内部抛出的错误，无法反应到外部。
当处于 pending 状态的时候，无法得知目前进展到哪一个阶段（刚开始还是即将完成）

Peomise 对象是一个构造函数，用来生成 Promise实例。

Promise.prototype.then((res) => {}) 只有Promise 的状态为 resolved 才会进入这个回调

Promise.prototype.catch((error) => {} ) 只有Promise 的状态为 rejected 才会进入这个回调

Promise.prototype.finally(()=> {}) 这个方法不接受任何参数，不管前面的 Promise 状态是 resolved 还是 rejected，都会执行finally 里面的回调.

Promise.all()方法将多个 Promise 实例，包装成一个新的Promise 实例。 接受一个数组作为参数，每个数组的元素都是 Promise 的实例，如果不是，会先调用 Promise.resolve()方法，将参数转为 Promise 实例。参数也可以不是数组，但是必须具有 Iterator 接口，且返回的每个成员都是 Promsie 实例。 只有当所有的参数 的状态都是 fulfilled ，Promise.all() 的状态才会变成 fulfilled，此时 数组参数的返回值组成一个数组，传递给 Promise.all() 的回调函数。 数组参数中只要有一个被 rejected, Promise.all() 的状态就变成了 rejected,此时第一个被 reject 的实例返回值会传递给 Promise.all() 的回调函数。 如果其中一个参数定义了自己的 catch 回调，即使其被 rejected，那么 Promise.all() 的 catch 方法与不会被触发。

Promise.race() 方法将多个 Promise 实例包装成一个新的 Promise 实例。其参数和 Promise.all() 方法一致。 const p = new Promise([p1,p2,p3]); 只要p1,p2,p3中又一个率先改变状态，那么 p 的状态就会跟着改变，其状态和 p 的状态一摸一样。在这里插入代码片