异步之 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)

(img-WvUnuoxR-1591101577778)(Promise.assets/image-20200511230554804.png)]

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aDKoeoOO-1591101577780)(Promise.assets/image-20200511232016546.png)]

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nTiyxgwZ-1591101577782)(Promise.assets/image-20200511232242732.png)]

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QP9tu2Wa-1591101577784)(Promise.assets/image-20200511232623277.png)]

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)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xlrMVgfI-1591101577786)(Promise.assets/image-20200511233729010.png)]

// 右侧为 失败的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)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-np26rjyV-1591101577787)(Promise.assets/image-20200511233729010.png)]

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

f1()
console.log(2)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZTWCmfF9-1591101577788)(Promise.assets/image-20200511233729010.png)]

注意

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

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

你可能感兴趣的:(异步之 async 与 await)