async promise在获取数据上的应用以及与.then的使用

一 async介绍以及在程序中使用

1.1async

async的作用是使函数异步，不阻碍后续代码的运行；

1.2await作用

await会阻碍后续代码的运行，遇到await时需要等到promise reslove后才可继续运行，同步运行外部函数，替代了.then；

1.3代码

    async getData(page, params) {
      this.tableLoading = true
      if (!this.wsSelect) {
        await this.getWS()      //先拿车间
      }
      await this.getRegion(this.wsSelect)  //拿区域和顶点
      await this.getDevs()//拿未布局的设备和已布局的设备
      this.$nextTick(() => { this.tableLoading = false })
    },

在上面这个代码中实现的是拿取车间设备的信息，每个拿取中都在调用着外部函数代码，若是有console.log将会同时显示出各自的信息；与.then的链式反应类似

二 promise作用

2.1 promise介绍

Promise是一个容器，Promise本身不是异步的，但是容器内部往往存放一个异步操作。

2.2 then 在promise作用

两个参数resolve, reject即是改变promise的状态，resolve 方法把 Promise 的状态置为完成态（Resolved），这时 then 方法就能捕捉到变化；then可接受两个参数，第一个处理Resolved状态的函数，第二个处理Rejected函数

2.3 程序中

    getDevs() {
      this.clearLayoutTree()
      return new Promise(async (res, rej) => {
        let promises = []
        promises.push(listNoLayoutProDev({    //未布局生产设备
          wsId: this.wsSelect,
          eqName: ""
        }).then(({ data }) => {
          data.forEach(item => {
            this.layoutDevTreeData[0].children.push(Object.assign({ label: item.eqName }, item))
          })
        }))
        promises.push(     //已布局生产设备
          listLayoutedProDev({    //已布局生产设备
            params: {
              wsId: this.wsSelect,
              eqName: ""
            }
          }).then(({ data }) => {
            this.layoutedProDv = data.data.data
          })
        )
        promises.push(      //已布局工控机
          listLayoutedCtrlDev({    //已布局工控机
            params: {
              wsId: this.wsSelect,
              eqName: ""
            }
          }).then(({ data }) => {
            this.layoutedCtrlDv = data.data.data
            this.layoutedCtrlDv.forEach(item => {
              item.eqCode = item.equipCode
              item.eqName = item.equipName
            })
          })
        )
        promises.push(listNoLayoutCtrlDev(this.wsSelect,).then(({ data }) => {    //未布局工控机
          data.forEach(item => {
            this.layoutDevTreeData[2].children.push(Object.assign({ label: item.equipName }, item))
          })
        }))
        promises.push(     //已布局物流设备
          listLayoutedTransDev({    //已布局物流设备
            params: {
              wsId: this.wsSelect,
              eqName: ""
            }
          }).then(({ data }) => {
            this.layoutedTransDv = data.data.data
            this.layoutedTransDv.forEach(item => {
              item.eqCode = item.equipCode
              item.eqName = item.equipName
            })
          })
        )
        promises.push(listNoLayoutTransDev(this.wsSelect,).then(({ data }) => {    //未布局物流设备
          data.data.data.forEach(item => {
            this.layoutDevTreeData[1].children.push(Object.assign({ label: item.equipName }, item))
          })
        }))
        promises.push(     //已布局缓冲设备
          listLayoutedBufferDev({    //已布局缓冲设备
            params: {
              wsId: this.wsSelect,
              eqName: ""
            }
          }).then(({ data }) => {
            this.layoutedBufferDv = data.data.data
            this.layoutedBufferDv.forEach(item => {
              item.eqCode = item.hsCode
              item.eqName = item.hsName
            })
          })
        )
        promises.push(listNoLayoutBufferDev(this.wsSelect,).then(({ data }) => {    //未布局缓冲设备
          console.log(data);
          data.data.forEach(item => {
            this.layoutDevTreeData[3].children.push(Object.assign({ label: item.hsName }, item))
          })
        }))

        Promise.all(promises).then(() => { res() })
      })
    },

在上面的代码中，promise扮演者异步的角色，拿取各设备数据并用push存储起来

总结 async  promise都是为了异步操作，结合图一的代码，await等待图二promise执行完毕返回的结果，一步步执行，await在忙时会阻碍后面的内部代码，但不影响外部代码的运行