JavaScript 的协程概念是如何通过 Generator 和 Async/Await 实现的？

JavaScript通过Generator和Async/Await实现协程式异步控制：1. Generator函数用yield暂停执行，通过next()手动恢复，支持外部控制与双向通信；2. Async/Await基于Promise，以同步语法自动处理异步流程，无需手动驱动；3. Async/Await是Generator的语法升级，内置自动执行机制，成为现代JS异步编程标准。

JavaScript 本身是单线程语言，不支持传统意义上的多线程协程，但通过 Generator 函数和 Async/Await 语法，实现了类似协程的“可暂停与恢复执行”的能力，从而支持异步流程的有序控制。

Generator：手动控制的协程

Generator 是 ES6 引入的一种特殊函数，通过 function* 定义，使用 yield 暂停执行，外部调用者可以逐步驱动其运行，实现协程的基本形态。

它返回一个迭代器对象，每次调用 .next() 才继续向下执行，直到遇到下一个 yield 或函数结束。

示例：

闪念贝壳

闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。

53

查看详情

立即学习“Java免费学习笔记（深入）”；

function* counter() {
  let count = 0;
  while (true) {
    yield ++count;
  }
}

const gen = counter();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

这就像一个可以随时暂停和恢复的任务，具备协程的核心特征。

Async/Await：基于 Promise 的自动协程

Async/Await 是 Generator 在异步编程中的语法升级，底层依赖 Promise，但使用方式更自然，像写同步代码一样处理异步逻辑。

async 函数自动返回 Promise，await 后面跟一个 Promise，函数会在此处“暂停”，直到 Promise resolve，再恢复执行。

示例：

立即学习“Java免费学习笔记（深入）”；

async function fetchData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    return data;
  } catch (err) {
    console.error(err);
  }
}

fetchData().then(data => console.log(data));

虽然 JavaScript 引擎不会真正阻塞线程，但 await 让异步代码表现出“顺序暂停”的行为，本质上是一种自动化的协程模式。

两者关系与演进

Generator 最初被用来解决回调地狱，配合工具函数（如 co）可以实现自动执行异步流程，是早期的协程实践。而 Async/Await 可以看作 Generator + Promise + 自动执行器的语法糖。

例如，以下 Generator 写法需要 co 库或手动驱动：

function* asyncTask() {
  const res = yield fetch('/api/data');
  const data = yield res.json();
  return data;
}

而 async/await 直接内置了这种流程控制，无需额外工具。

基本上就这些。Generator 提供了协程的原始模型，Async/Await 则让这种模式变得简洁实用，成为现代 JavaScript 异步编程的标准方式。

以上就是JavaScript 的协程概念是如何通过 Generator 和 Async/Await 实现的？的详细内容，更多请关注php中文网其它相关文章！