异步之 async 与 await

async

• return 的返回值为 Promise

• Promise对象的结果由async函数执行的返回值决定

语法

// 定义async函数
async function name([参数1, 参数2...]) { 
  函数体 
}

描述

使用async定义函数，函数内部可以使用await关键字，并且该异步函数会返回一个Promise

• 状态为 resolved => return普通值 | 成功的Promise
• 状态为 rejected => 函数内部错误 | 失败的Promise

实例

// return普通值	=> 成功的Promise
async function fn1() {
  return 1
}

let res = fn1()
console.log(res)

// return成功的Promise	=> 成功的Promise
async function fn2() {
  return Promise.resolve(2)
}

fn2().then(value => {
  console.log(value)
})

// 函数内部错误	=> 失败的Promisejs
async function fn3() {
  throw 3
}

fn3().catch(e => {
  console.log(e)
})

// return失败的Promise	=> 失败的Promise
async function fn4() {
  return Promise.reject(4)
}

fn4().then(
  () => {},
  reason => {console.log(reason)}
)

await

• 必须在 async Function 内部使用
• await 右侧的值为
  1. Promise（返回值为Promise成功的值 | 失败只能用try…catch捕捉）
  2. value（返回值为该value）

语法

[return_value] = await expression;

参数

• 表达式

  一个 Promise 对象或者任何要等待的值。

• 返回值

  返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。

  如果右侧Promise为失败，那么只能用 try…catch 捕捉 | catch方法捕捉

实例

// 右侧为 成功的Promise
async function f1() {
  console.log(1)
  const res = await Promise.resolve(3)
  console.log(res)
}

f1()
console.log(2)

// 右侧为 失败的Promise
async function f1() {
  console.log(1)
  try {
    const res = await Promise.reject(3)
  } catch(reason) {
    console.log(reason)
  }
}

f1()
console.log(2)

// 右侧为 失败的Promise
async function f1() {
  console.log(1)
  const res = await Promise.reject(3).catch((reason) => {
    console.log(reason)
  })
}

f1()
console.log(2)

// 右侧为 值
async function f1() {
  console.log(1)
  const res = await 3
  console.log(res)
}

f1()
console.log(2)

注意

await必须写在async函数中，但async函数中可以没有await

如果await的Promise失败了，就会抛出异常，需要通过try…catch来捕获捕获处