async/await在事件循环中是如何工作的？-js教程-PHP中文网

async/await在事件循环中是如何工作的？

星降

发布： 2025-07-25 12:33:02

原创

880人浏览过

async/await是基于promise的语法糖，它简化了异步代码的编写，使其更易读和维护。1. async函数始终返回一个promise，函数内部的返回值会被promise.resolve()包装，而抛出的错误则会触发promise的reject；2. await用于等待promise resolve，暂停async函数的执行，但不会阻塞事件循环，而是将后续代码放入微任务队列中等待执行；3. promise的回调被放入微任务队列，优先于宏任务执行，因此await后的代码会在当前宏任务结束后立即继续执行；4. 使用try/catch可捕获await中的错误，使错误处理更加直观；5. 使用promise.all或promise.allsettled可以并发处理多个异步任务，并在所有任务完成后统一处理结果；6. await在循环中使用时，需根据是否需要串行或并行执行选择for...of或promise.all。async/await并未改变事件循环机制，只是提供了更清晰的异步编程方式。

async/await在事件循环中是如何工作的？

async/await本质上是基于Promise的语法糖，它并没有改变JavaScript事件循环的运行方式。理解其工作原理的关键在于理解Promise如何与事件循环交互，以及async/await如何简化Promise的使用。

async/await简化了异步代码的编写，让异步代码看起来更像同步代码，但其底层仍然是基于Promise的非阻塞操作。

async/await的背后机制

async函数到底做了什么？

async函数会隐式地返回一个Promise。如果函数体内部直接返回一个值，这个值会被Promise.resolve()包装成一个fulfilled状态的Promise。如果函数内部抛出错误，那么async函数返回的Promise会被reject。例如：

async function myAsyncFunction() {
  return 'Hello';
}

myAsyncFunction().then(value => console.log(value)); // 输出 "Hello"

async function myAsyncFunctionWithError() {
  throw new Error('Something went wrong');
}

myAsyncFunctionWithError().catch(error => console.error(error)); // 输出 Error: Something went wrong

登录后复制

这表明async函数的核心在于它总是返回一个Promise，无论函数体内的逻辑如何。

await关键字的魔法

await关键字用于等待一个Promise对象resolve。当JavaScript引擎遇到await时，它会暂停async函数的执行，直到await后面的Promise对象resolve。重要的是，await并不会阻塞整个事件循环。相反，它会将async函数剩余部分的执行“解耦”出来，放入事件循环的微任务队列（microtask queue）中。一旦await后面的Promise resolve，事件循环会从微任务队列中取出这个任务，继续执行async函数剩余的部分。

举个例子：

async function example() {
  console.log('Start');
  const result = await new Promise(resolve => setTimeout(() => resolve('Done'), 1000));
  console.log(result);
  console.log('End');
}

example();

console.log('Outside async function');

登录后复制

这段代码的执行顺序是：

Start
Outside async function
等待1秒
Done
End

这里，await暂停了example函数的执行，但并没有阻塞console.log('Outside async function')的执行。1秒后，Promise resolve，Done和End才会被打印。

微任务队列（Microtask Queue）的重要性

Promise的resolve/reject回调函数会被放入微任务队列中，而不是宏任务队列（macrotask queue）。微任务队列的优先级高于宏任务队列。这意味着，在每个宏任务（例如setTimeout回调，用户交互等）执行完毕后，JavaScript引擎会先清空微任务队列，然后再去执行下一个宏任务。

多个迹象表明你还是PHP菜鸟

我愿意把本文归入我的“编程糗事”系列。尽管在正规大学课程中，接触到软件工程、企业级软件架构和数据库设计，但我还是时不时地体会到下述事实带给我的“罪恶”感，当然，都是我的主观感受，并且面向Eclipse：　　你是PHP菜鸟，如果你：　　1. 不会利用如phpDoc这样的工具来恰当地注释你的代码　　2. 对优秀的集成开发环境如Zend Studio或Eclipse PDT视而不见　　3

379

查看详情

这解释了为什么在上面的例子中，即使setTimeout设置了1秒的延迟，Done和End仍然会在Outside async function之后立即执行，而不是等待下一个宏任务的开始。

错误处理：try/catch与async/await

在async函数中，可以使用try/catch块来捕获await表达式可能抛出的错误。这使得错误处理更加直观和方便。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

登录后复制

如果fetch或response.json()抛出错误，catch块会捕获这个错误，并进行相应的处理。

为什么async/await比直接使用Promise更清晰？

async/await通过将异步代码转换为看似同步的代码，极大地提高了代码的可读性和可维护性。它避免了Promise链式调用中可能出现的“回调地狱”，使得代码逻辑更加清晰。

如何处理多个并发的异步操作？

可以使用Promise.all或Promise.allSettled来并发执行多个异步操作，并在所有操作完成后进行处理。

async function processData() {
  const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
  console.log('Data 1:', data1);
  console.log('Data 2:', data2);
}

登录后复制

Promise.all会并行执行fetchData1和fetchData2，并在它们都resolve后，将结果分别赋值给data1和data2。如果其中任何一个Promise reject，Promise.all会立即reject。

async/await会阻塞事件循环吗？

不会。await关键字会暂停async函数的执行，但不会阻塞事件循环。事件循环仍然可以处理其他任务，例如用户交互和定时器回调。只有当await后面的Promise resolve时，async函数才会继续执行。

如何在循环中使用async/await？

在循环中使用async/await时，需要小心处理并发问题。如果需要在循环中串行执行异步操作，可以使用for...of循环。如果可以并行执行异步操作，可以使用Promise.all。

async function processItems(items) {
  for (const item of items) {
    const result = await processItem(item);
    console.log('Processed:', result);
  }
}

async function processItemsInParallel(items) {
  const results = await Promise.all(items.map(item => processItem(item)));
  console.log('Processed:', results);
}

登录后复制

processItems会串行地处理每个item，而processItemsInParallel会并行地处理所有item。选择哪种方式取决于具体的业务需求。

以上就是async/await在事件循环中是如何工作的？的详细内容，更多请关注php中文网其它相关文章！