async 内部函数的await 执行顺寻 在浏览器宏任务和微任务相关的流程

在讨论JavaScript中的async和await以及浏览器中的宏任务和微任务时，有一些重要的概念需要理解。

1. async 函数和 await：
   • async函数是一个返回Promise对象的函数。在函数内部，使用await关键字可以暂停函数的执行，等待Promise解决（fulfilled）后继续执行函数。
   • 当await表达式后面的Promise被解决，async函数会继续执行。如果Promise被拒绝（rejected），则会抛出异常，可以通过try...catch块来捕获。

async function example() {
  try {
    const result = await somePromise;
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

2. 宏任务和微任务：

   • 在浏览器中，JavaScript执行过程被分为宏任务和微任务。
   • 宏任务通常包括从用户输入、定时器等触发的任务。例如，setTimeout、setInterval等。
   • 微任务通常是由Promise解决或拒绝时触发的任务。例如，Promise.then、Promise.catch、Promise.finally以及使用queueMicrotask添加的任务。

3. 执行顺序：

   • 当async函数内部遇到await时，它会暂停执行并让出主线程。
   • 在执行await期间，浏览器有机会执行其他宏任务（例如用户交互或定时器）。
   • 一旦await后的Promise被解决，async函数将从暂停的地方继续执行。
   • async函数内部的await表达式后面的代码会被视为微任务，会在当前任务结束后立即执行。

async function example() {
  console.log('Start');
  await somePromise; // Pause execution until somePromise is resolved
  console.log('After await');
}

console.log('Before calling example');
example();
console.log('After calling example');

在上述例子中，执行顺序是：

1. “Before calling example”
2. “Start”
3. “After calling example”
4. (等待somePromise解决)
5. “After await”

请注意，微任务总是在当前宏任务执行完毕后立即执行，而不会等待下一个宏任务。这确保了异步代码的执行顺序。