Skip to content

async...await 了解

async函数返回一个Promise对象,await用于等待一个表达式的返回值

  • 注意1:表达式可以是一个任意的数据类型(除了arrow function)

  • 注意2:await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成

若 Promise 正常处理(fulfilled),其回调的resolve函数参数作为 await 表达式的值,继续执行 async function

如果 await 操作符后的表达式的【值】不是一个 Promise,则返回该值本身

若 Promise 处理异常(rejected),await 表达式会把 Promise 的异常原因抛出,且await后面代码不再执行. 可用try...catch捕获

js
// 试题1
async function async1() {
  // 没搞懂下面这两种写法有啥区别?得到的答案完全不一样
  await async2();
  // await new Promise((res) => {
  //   res();
  // });
  console.log(2);
}
async function async2() {
  return new Promise((res) => {
    res();
  });
}

async1();

new Promise(function(resolve) {
  resolve();
}).then(function() {
  console.log(7);
}).then(function() {
  console.log(7);
});
js
// 试题2【chrome&firefox执行结果一致】
// 跟上面一样,没搞懂await注册微任务的时机
async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}

async function async2() {
  console.log('async2 start')
  return new Promise((resolve, reject) => {
    resolve()
    console.log('async2 promise')
  })
}

console.log('script start')
setTimeout(() => {
  console.log('setTimeout')
}, 0)

async1()

new Promise((resolve) => {
  console.log('promise1')
  resolve()
}).then(() => {
  console.log('promise2')
}).then(() => {
  console.log('promise3')
})
console.log('script end')