返回

await、async 与事件循环

前端

异步编程的魅力

在现代 Web 开发中，异步编程早已成为主流。它使我们能够在不阻塞主线程的情况下执行耗时的任务，从而为用户提供流畅的交互体验。而 JavaScript 中的 await 和 async 正是异步编程的利器，它们让我们能够以一种更简单、更优雅的方式编写异步代码。

揭开 await 与 async 的面纱

async 关键字

async 关键字用于声明一个异步函数，它允许该函数内部使用 await 关键字。异步函数本身并不执行任何异步操作，它只是标记了该函数可以包含 await 表达式。

await 关键字

await 关键字用于暂停异步函数的执行，直到它所等待的 Promise 完成。这意味着，异步函数中的代码将按照顺序执行，直到遇到 await 关键字，此时函数将暂停执行，直到 Promise 完成后才继续执行。

事件循环与异步编程的邂逅

JavaScript 引擎有一个称为事件循环的机制，它负责管理异步任务的执行。事件循环会不断循环，检查是否有待执行的任务，如果有，则执行这些任务。

当一个异步函数被调用时，JavaScript 引擎会创建一个 Promise 对象，并将该函数添加到事件循环的待执行任务队列中。当 Promise 完成时，JavaScript 引擎会从队列中取出该函数，并继续执行该函数。

活用 await 与 async

编写异步函数

async function myAsyncFunction() {
  const result = await Promise.resolve('Hello, world!');
  console.log(result);
}

myAsyncFunction(); // 输出: 'Hello, world!'

并行执行异步任务

async function main() {
  const task1 = fetch('https://example.com/data1.json');
  const task2 = fetch('https://example.com/data2.json');

  const [data1, data2] = await Promise.all([task1, task2]);

  console.log(data1, data2);
}

main();

处理异步错误

async function myAsyncFunction() {
  try {
    const result = await Promise.reject(new Error('Oops!'));
  } catch (error) {
    console.error(error);
  }
}

myAsyncFunction(); // 输出: Error: Oops!

结语

await 和 async 关键字是 JavaScript 中用于编写异步代码的利器，它们使我们能够以一种更简单、更优雅的方式处理异步任务。通过理解这些关键字的工作原理以及它们与事件循环的关系，我们可以编写出更高效、更可靠的异步代码。

更进一步

资源推荐

扩展阅读