async与await的应用

async与await的应用

aysnc的说明

一、async/await 是一种更加优雅的异步编程的写法

1.它是消灭异步回调的终极武器
2.它只是同步语法，即用同步的写法写异步的代码

二、async/await 和 promise的关系

async/await 是消灭异步回调的终极武器
但和Promise并不排斥，两者相辅相成
执行 async 函数，返回的是 Promsie 对象
await 相当于 Promise 的 then ，then指的是成功，不指失败
try…catch 可捕获异常，代替了 Promise的 catch

在汕尾督办的分解列表中遇到的问题：

在复用和新增的操作的时候，需要拿接口返回来的id才能进入改信息的详情页，但是有时候接口返回的太慢，拿了上一条的id。

复现操作

点击查看详情页。

要拿到接口返回来的id，就是通过调用列表数据的接口，拿到他最新的第一条数据的id,进行调用详情的接口

// 送立项或者送办理调用的接口
    submitUndertake(params) {
      submitUndertake(params).then(async(res) => {
        if (res.data.data.success) {
          this.formSearch()
          this.$message({ type: 'success', message: '提交成功' })
          await this.getTableListData()
          // 当是复用或者新增的时候需要后台返回的第一条id才可以查看详情页，所以，要等获取数据的接口执行完，再去调用组件
          this.taskTitleVisible = false
          this.openType = 'list'
          this.$refs.successPage.successInit(res.data.data.nextInfo, 'detail', '', '', res.data.data.nextApproveName)
        }
      })
    },

上面的代码，async放在then后面，然后await要等列表接口调用完，才执行下面的操作。