Promise从两眼发懵到双眼放光(9)-async和await

async函数

async的MDN文档

1. async函数的返回值为promise对象
2. async函数返回的promise的结果由函数执行的结果决定

async function fn1() {
    return 1
}
console.log(fn1())的输出结果为Promise类型

async function fn1() {
    return 1  //成功的value为1的promise
    throw 2   //失败的reason为2的promise
    return Promise.reject(3) //失败的reason为3的promise
    return Promise.resolve(3)  //成功的reason为3的promise
    return new Promise((resolve, reject) => {
        resolve(4)  //成功的value为4的promise
        reject(4)   //失败的reason为4的promise
    }) 
  }

await表达式

await的MDN文档

1. await右侧的表达式一般为promise对象, 但也可以是其它的值
2. 如果表达式是promise对象, await返回的是promise成功的值
3. 如果表达式是其它值, 直接将此值作为await的返回值
4. 如果await的promise失败了, 就会抛出异常, 需要通过try...catch来捕获处理
5. await必须写在async函数中, 但async函数中可以没有await

function fn2() {  
  return new Promise((resolve, reject) => {  
    resolve(1)  
  })  
}  
  
function fn3() {  
  return 3  
}  
  
function fn4() {  
  return new Promise((resolve, reject) => {  
    reject(2)  
  })  
}  
  
 //函数体内有await,函数声明是必须有async,但是async函数内不必须有await
(async function(){  
  const r1 = await fn2()  
  console.log(r1)  //输出结果为1,并不代表fn2的返回值是1,而是说fn2()返回一个成功的value为1的promise,await的返回值是promise的成功的value
  
  const r2 = await fn3()  
  console.log(r2)  //输出结果为3,await右侧的表达式是非promise,直接此值返回
  
  const r3 = await fn4()  
  console.log(r3)  //uncaught异常,如果await右侧返回是一个失败的promise,则需要使用try...catch来捕获异常
  try {  
    await fn4()  
  } catch(error) {  
    console.log(error)  //输出结果为2
  }
})()

Promise系列文章

Promise从两眼发懵到双眼放光(1)-准备篇
Promise从两眼发懵到双眼放光(2)-Promise基础
Promise从两眼发懵到双眼放光(3)-Promise的几个关键问题(一)
Promise从两眼发懵到双眼放光(4)-Promise的几个关键问题(二)
Promise从两眼发懵到双眼放光(5)-手写Promise之整体结构
Promise从两眼发懵到双眼放光(6)-手写Promise之构造函数
Promise从两眼发懵到双眼放光(7)-手写Promise之then方法和catch方法
Promise从两眼发懵到双眼放光(8)-手写Promise之resolve,reject,all,race方法
Promise从两眼发懵到双眼放光(9)-async和await