vue promise 使用async 实现异步请求

需求:根据不同ID一次性请求所有对应ID详情的内容统一放入进去

 看代码:
 

<el-table
        ref="table"
        v-loading="loading"
        height="500px"
        style="width:100%;"
        :data="newTableData ? newTableData : tableData"
        border
      >
        <el-table-column label="节点序号" type="index" width="80" align="center"/>
        <el-table-column label="节点名称" width="100" prop="nodeName" align="center"/>
        <el-table-column label="是否为定时节点" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.timeNodeFlag ==='1'?'是':'否' }}
          </template>
        </el-table-column>
        <el-table-column label="时间参照" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.startTimeIndex }}
          </template>
        </el-table-column>
        <el-table-column label="开始时间" width="140" prop="startTime" align="center"/>
        <el-table-column label="结束时间" width="140" prop="endTime" align="center"/>
        <el-table-column label="节点描述" width="200" prop="remark" align="center"/>
        <el-table-column label="流转详情" align="left">
          <template slot-scope="scope">
            <span v-for="(item,i) in scope.row.detail" :key="i" style="text-align: left;white-space:nowrap;">
              <el-tooltip placement="top" popper-class="atooltip">
                <span v-for="(li,j) in scope.row.detail" :key="j" slot="content">
                  下一节点:{{ li.nextNodeName }},
                  触发条件名称:{{ li.routeStrageName }},
                  操作符:{{ li.routeOperatorVal }},
                  操作值:{{ li.routeValueName }},
                  <br>
                </span>
                <span>
                  下一节点:{{ item.nextNodeName }},
                  触发条件名称:{{ item.routeStrageName }},
                  操作符:{{ item.routeOperatorVal }},
                  操作值:{{ item.routeValueName }},
                </span>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作流转配置" width="80" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.row, scope.$index)"
            />
          </template>
        </el-table-column>
      </el-table>

js:

请求数据并定义一个this.newTableData空数组用来存放数据,再对数据赋值,方便后面用到swatch监听

 // 加载节点列表信息
      queryProcessNodeList() {
        this.loading = true
        const params = {
          processId: this.activityInfo.processId,
          pageNo: this.currentPage,
          pageSize: this.pageSize
        }
        queryProcessNodeList(params).then(res => {
          this.loading = false
          this.newTableData = null
          this.tableData = res.list.map((item, i) => {
            if (item.timeNodeFlag === '1') {
              if (isBlank(item.startTime)) {
                const target = REFERENCE_TIME_OPTIONS.find(i => i.value === item.startTimeIndex)
                item.startTimeIndex = target ? target.label : '绝对时间'
              } else {
                item.startTimeIndex = '绝对时间'
              }
              return {
                ...item,
                ...{
                  startTimeIndex: item.startTimeIndex
                }
              }
            } else {
              return {
                ...item
              }
            }
          })

          this.total = res.total
        }).catch(e => {
          this.loading = false
          this.message.error(e.toString())
        })
      },

swatch监听并赋值:

 watch: {
      // 请求数据列表,根据ID调用对应的数据内容
      async  tableData(newVal) {
        if (newVal) {
          const val = [...newVal]
          for (let i = 0; i < val.length; i++) {
            const addVal = await this.getRouteByNode(val[i].nodeId, i, val[i + 1])
            val[i] = { ...val[i], ...addVal }
          }
          if (val) {
            this.loading = false
          }
          this.newTableData = val
          this.allRouteByNodeList = val
          this.tableLoad = false
        }
      }
    },

调用swatch中的getRouteByNode()方法传入不同的ID请求不同的数据统一赋值,

　　async 关键字差不多了，最重要的就是async函数的执行会返回一个promise 对象，并且把内部的值进行promise的封装。如果promise对象通过then或catch方法又注册了回调函数，async函数执行完以后，注册的回调函数就会放到异步队列中，等待执行。如果只是async,  和promise 差不多，但有了await就不一样了， await 关键字只能放到async 函数里面，await是等待的意思，那么它等待什么呢，它后面跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式，它等待的是promise 对象的执行完毕，并返回结果

 

 methods: {
      // 查询节点列表详情
      async  getRouteByNode(nodeId, index, nextData) {
        this.loading = true
        const params = {
          processId: this.activityInfo.processId,
          nodeId
        }
        // 获取节点详细节点select列表
        const nodeName = await this.queryProcessNodeForRoute(this.activityInfo.processId)
        return new Promise((resolve, reject) => {
          queryRouteByNode(params)
            .then(resp => {
              const allRouteByNodeList = []
              const defaultNode = []
              if (resp.processRouteDtos.length > 0) {
                resp.processRouteDtos.forEach(item => {
                  allRouteByNodeList.push({
                    ...item,
                    operateFlag: '',
                    priority: '',
                    routeOperatorVal: item.routeOperators === '=' ? '等于' : '不等于'
                  })
                })
              } else {
               
              // 默认节点
              if (resp.processRouteVos.length > 0) {
                defaultNode.push(resp.processRouteVos[0])
              }

              var detail = { detail: allRouteByNodeList, defaultNode }
              resolve(detail)
            })
            .catch(e => {
              this.loading = false
              reject(e.toString())
            })
        })
      },}