用7张图搞定async/await原理，再也不要懵逼了！

2023-09-08 23:59:58

大家好，我是林三心。我致力于用最通俗的语言讲解最难的知识点。之前，我发布了一篇关于Promise原理的文章，得到了广泛好评。今天，我将继续深入探究JavaScript异步编程的奥秘，带大家领略async/await的魅力。

为什么 async/await 如此重要？

在现代Web开发中，异步编程无处不在。它使我们能够在不阻塞主线程的情况下执行耗时的任务，从而避免应用卡顿。async/await是处理异步操作的语法糖，它极大地简化了异步编程，让代码更具可读性和可维护性。

async/await 原理详解

1. Promises 回顾

async/await 依赖于Promises，因此，在深入研究async/await之前，我们先回顾一下Promises。Promises是一种表示异步操作结果的对象。它有三种状态：pending（等待）、fulfilled（完成）和rejected（拒绝）。当异步操作完成时，Promise会将结果（如果成功）或错误（如果失败）传递给回调函数。

2. 事件循环

要理解async/await，必须了解JavaScript的事件循环。事件循环是一个不断运行的循环，它负责处理事件队列中的事件。当一个异步操作被触发时，它会被添加到事件队列中。事件循环会在主线程空闲时依次处理这些事件。

3. 协程

协程是一种轻量级的线程，它允许程序暂停和恢复执行。async/await利用协程来处理异步操作。当一个async函数被调用时，它会创建一个协程。如果函数中遇到了await，协程会暂停执行，并将控制权交还给事件循环。事件循环会处理其他事件，直到异步操作完成。此时，协程会恢复执行，并继续从await后面执行代码。

7 张图轻松理解 async/await

现在，我们用7张图来直观地理解async/await的原理：

图 1：Promises 的基本原理

[图片]

图 2：事件循环

[图片]

图 3：协程

[图片]

图 4：async 函数

[图片]

图 5：await 关键字

[图片]

图 6：async/await 流程

[图片]

图 7：async/await 的优势

[图片]

实例演示

下面是一个使用async/await的简单示例：

async function myFunction() {
  try {
    const data = await fetch('https://example.com/api/data');
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}