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

本文链接：https://blog.csdn.net/c_x_m/article/details/124869358

前端数据集拖拽管理设定

项目Demo
实现过程

项目Demo

项目构想

想要实现多表连接，如A表，B表之间，需要知道的信息如下：
1.有哪些表：进行拖拽选择
2.A表与 B表的连接方式：Left join/Right join/Uniton…
3.A表与 B表的关系参数：如A.ID = B.ID
逻辑：
数据集：选择表
对应关系：默认a与b关联，b与c关联。可进行下拉自由选择如a与b关联，a与c关联
关联参数：由对应关系默认生成一组对应关系，可进行添加或删除

借用插件：<vue -draggable> 使用方法可参考这个博客：链接

实现过程

一共有五个参数：

dataBaseList ：选中的数据集
dataSetDataList：存储选中的数据集及对应关系与关联参数
selectList：操作符 = <>…
dataSetData:源数据集；
setParamListC去重后的源数据集（链接，看了此链接就知道了）

返回后台结果

[{
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)
 },

splice 用法与讲解

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

参数	描述
index	必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX	可选。要添加到数组的新元素

获取某数据集编码的下拉参数（async/await）

调用方式

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

在这里插入图片描述

同时获取两个setCode 对应的数据集字段（返回Promise如何获取值）

异步方法同步调用出现的问题,

  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

概念: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 的状态一摸一样。在这里插入代码片