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())
            })
        })
      },}