async和await的使用

async和await的使用

• async

  • async函数返回一个 Promise 对象，可以使用 then 方法添加回调函数
  • async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值，假如异步操作 reject，则不再执行后面的操作

• await

  • await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用
  • 返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身
  • 如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果
  • 正常情况下，await 命令后面是一个 Promise 对象，它也可以跟其他值，如字符串，布尔值，数值以及普通函数
  • await针对所跟不同表达式的处理方式：
    • Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值，假如 Promise 对象 reject，async函数不再执行后面的操作
    • 非 Promise 对象：直接返回对应的值

• 使用

  const getHasUser1 = async (pager = 1) => {
    pageNo.value = pager
    let result: UserResponseData = await reqUserInfo(pageNo.value, pageSize.value)
    if (result.code === 200) {
      total.value = result.data.total
      userArr.value = result.data.records
    }
  }
  const getHasUser2 = async (pager = 1) => {
    pageNo.value = pager
    await reqUserInfo(pageNo.value, pageSize.value)
    console.log('success')
  }
  

  • 函数1中result可以获取 reqUserInfo 函数返回的 Promise 对象 resolve 结果，进行后续判断
  • 函数2中，假如 reqUserInfo 函数 Promise 对象 resolve，继续执行后续操作，假如 Promise 对象 reject，不再执行后续操作

• try...catch...可以捕获 Promise 对象 reject 的信息

• 通俗：async函数里面出现await，表示需要等到某一函数成功返回的结果再执行后续的操作，假如函数reject，不再执行后续操作