async/await

上周我们写到用回调或者then处理异步操作，这周我们体验一下使用async/await来处理异步

1.什么是async/await?

async是“异步”的意思，async function 声明用于定义一个返回promise对象的异步函数
。而await从字面意思上是“等待”的意思，就是用于等待异步完成。并且await与async是配套使用，即只能在async函数中使用。await得到Promise对象之后就等待Promise接下来的resolve或者reject。

// 
async function asyncFun() {
  return 'hello async'
}
console.log(asyncFun ())

image.png

从上面的返回结果我们可以看到，如果async直接返回的是一个return值，那么他会封装成peomise中的resolved。
若我们就是想要这个返回值怎么办呢？就像上周peomise提到的then用法

async function asyncFun() {
  return 'hello async'
}
asyncFun().then((value) => {
  console.log(value) // hello async
})

image.png

2.实际应用中return返回了一个undefined怎么办？

在一些实际应用中，我们想要把接口请求回来的数据，渲染到页面，并且要执行下一步操作时，我们肯定会想到用异步处理，但是我们不知道请求接口会花费多少时间，万一还没有返回数据，渲染上去的就是undefined，页面肯定会报错。
例子：

async getGroupConfig (val) {
      this.modifyGroup.loading = true
      const url = '/Document/getGroupDetail'
      const finUrl = '/Document/getStaffInfoByCenter'
      try {
        let modifyGroup = this.modifyGroup
        let req = {
          params: {
            id: val
          }
        }
        let {error, msg} = await this.$axios.get(url, req)
        if (error) {
          this.$message.warning(msg)
          return
        }
        modifyGroup.id = msg.id
        modifyGroup.name = msg.name
        modifyGroup.department = msg.centerTree.split(',').map(ele => ele.split('#'))
        modifyGroup.centerId = msg.centerId.split(',')
        modifyGroup.extraStaff = msg.extraStaff.map(ele => ele.staffId)
        modifyGroup.extraStaffOption = msg.extraStaff
        modifyGroup.removeStaff = msg.removeStaff.map(ele => ele.staffId)
        let reqParams = {
          params: {
            centerId: msg.centerId
          }
        }
        let res = await this.$axios.get(finUrl, reqParams)
        if (res.error) {
          this.$message.warning(res.msg)
          return
        }
        modifyGroup.removeStaffOption = res.msg
        this.modifyGroup.loading = false
      } catch (err) {
        this.modifyGroup.loading = false
        console.log(err)
      }
    },

在上面例子我们可以看到，首先是请求‘/Document/getGroupDetail'这个接口，返回的结果作为第二个接口/Document/getStaffInfoByCenter的参数。若返回的是ubdefined，那么在请求第二个接口时必将报错，这是我们就用到await

3.await帮我们做了什么？

首先，await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。
其次，await是在等待acync函数的完成，其获取到的是一个promise的计算结果，即一个真正的实际返回值。
例如：还是看上面的例子

let {error, msg} = await this.$axios.get(url, req)

4.通过async方法重写 promise 链

上周的promise中，在多个业务中，我们使用多个then进行多次的处理，这样使用起来特别麻烦。

newPromise1().then((data) => {
    console.log(data)
    return newPromise2()
  }).then((data) => {
    throw new Error('Something failed')
    console.log('Do this')
    return newPromise3()
  }).catch(() => {
    console.log('Do what')
  }).then((data) => {
    console.log(data)
  })

但是我们可以通过上面第一个例子中的await写法：

async getGroupConfig (val) {
    let {error, msg} = await this.$axios.get(url, req)
    let res = await this.$axios.get(finUrl, reqParams)
}

5.错误处理

正常：promise正常resolve，那么await返回这个结果
异常：但是在reject的情况下会抛出一个错误

async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url); 
  } catch (e) {
    v = await downloadFallbackData(url);
  }
  return processDataInWorker(v);
}