领悟async/await 协程并发编程的精髓

前端

2024-02-14 15:00:39

协程并发编程的革命：深入剖析 async/await

在现代软件开发中，高并发编程至关重要，而 JavaScript 中传统异步编程方式的局限性显而易见。作为回应，ES8 引入了 async/await ，一组语法糖，让异步编程变得前所未有的简单和高效。

Promise 的局限

在 async/await 出现之前，JavaScript 中常见的异步编程方式主要依靠 回调函数 和 Promise 。然而，这两种方法都存在着难以克服的弊端：

回调函数的嵌套： 当需要在多个异步操作之间进行嵌套时，回调函数的嵌套会导致代码变得难以阅读和维护，形成所谓的 "回调地狱"。

Promise 的链式调用： Promise 的链式调用在处理多个异步操作时也存在类似的问题，容易导致代码混乱和难以调试。

生成器的原理

为了解决这些问题，ES6 引入了 生成器 。生成器是一种特殊的函数，允许暂停自己的执行并在稍后恢复，这为编写异步代码提供了更简洁的方式。

生成器语法如下：

function* generatorFunction() {
  // 代码块 1
  yield value1;
  // 代码块 2
  yield value2;
  // 代码块 3
  return value3;
}

yield 用于暂停生成器执行并返回一个值。再次调用生成器时，它会从 yield 语句之后继续执行。

协程的概念

协程是生成器函数的特殊形式，用于实现并发编程。协程可以同时运行多个任务，并在任务之间切换，有效地利用 CPU 资源。

协程语法如下：

async function coroutineFunction() {
  // 代码块 1
  await promise1;
  // 代码块 2
  await promise2;
  // 代码块 3
  return value;
}

async 关键字表示这是一个协程函数，await 关键字用于等待异步操作完成。当异步操作完成后，协程函数会继续执行。

async/await 的原理

async/await 是 ES8 中引入的语法糖，让编写协程函数变得更加容易。其原理如下：

async 函数被编译成一个生成器函数。
调用 async 函数时，实际上是在调用这个生成器函数。
生成器函数执行到第一个 yield 语句，然后暂停执行。
此处，async 函数返回一个 Promise 对象。
当 Promise 对象被 resolve 时，生成器函数继续执行。
生成器函数继续执行直到 return 语句，并返回一个值。
该值是 async 函数的返回值。

编码示例

让我们通过一个示例来展示 async/await 的强大功能：

async function fetchUserData(userId) {
  const user = await fetch(`https://example.com/users/${userId}`);
  const data = await user.json();
  return data;
}

async function main() {
  const userId = 123;
  const userData = await fetchUserData(userId);
  console.log(userData);
}

main();