什么是协程？JS中的协程实现

幻夢星雲

发布时间：2025-08-15 15:20:02

1023人浏览过

来源于php中文网

原创

协程是一种用户态的轻量级线程，表现为协作式多任务编程模式。在JavaScript中，它通过Generator函数和async/await实现，允许函数在执行中暂停并恢复，从而简化异步流程。Generator是协程的基础，通过yield暂停、next()恢复，实现手动控制执行流；async/await则是基于Promise的语法糖，让异步代码像同步代码一样线性执行，提升可读性和维护性。尽管如此，JavaScript协程运行在单线程上，无法实现真正并行，长时间同步任务仍会阻塞主线程。此外，错误处理需谨慎，未被捕获的Promise拒绝可能引发全局异常，且await不会加速异步操作本身，大量独立任务应结合Promise.all等并发手段优化性能。调试时调用栈可能不连贯，需适应异步本质。因此，协程虽极大改善了异步编程体验，但并非万能，需理解其局限以合理应用。

什么是协程？js中的协程实现

协程，在我看来，它不是一个线程，更不是一个进程，它更像是一种“用户态的轻量级线程”或者说“协作式多任务”的编程模式。简单讲，它允许你在一个函数内部，在某个点暂停执行，把控制权交给调用者，然后在未来的某个时刻，从暂停的地方继续执行。这对于处理异步操作，尤其是那些需要等待外部资源（比如网络请求、文件读写）完成的任务，简直是福音。在JavaScript里，我们没有传统意义上的多线程，所以协程这种非阻塞的、协作式的并发模型就显得尤为重要，它让我们的异步代码写起来更像是同步代码，逻辑流也清晰得多。

解决方案

协程的核心思想在于“协作式”的暂停与恢复。想象一下，你正在做饭（执行一个函数），做到一半发现缺了酱油（需要等待一个异步操作），你不会傻傻地站在那里等酱油自己出现，而是会暂停做饭，去买酱油（把控制权交出去）。等酱油买回来了，你再回到厨房，从刚才停下的地方继续做饭。这就是协程。

在编程中，它意味着一个函数可以在执行过程中“yield”（让出）控制权，而不是直接返回。当它yield时，它的状态（局部变量、执行位置等）会被保存下来。之后，当外部条件满足时，可以“resume”（恢复）这个函数，它会从上次yield的地方继续执行，直到遇到下一个yield点或者执行结束。这种模式极大地简化了异步代码的复杂性，避免了回调地狱，让我们的代码看起来更线性、更易读。

JavaScript 中协程的基石：Generator 函数是如何工作的？

说起JavaScript里的协程，Generator函数绝对是绕不开的基石。在

async/await

出现之前，Generator函数就是我们模拟协程行为的利器。它们是ES6引入的一个特性，通过

function*

语法定义，内部使用

yield

关键字来暂停执行。

当一个Generator函数被调用时，它并不会立即执行内部代码，而是返回一个迭代器（Iterator）。这个迭代器有一个

next()

方法。每当你调用

next()

方法时，Generator函数就会从上次暂停的地方（或者从头开始）执行，直到遇到下一个

yield

表达式，或者函数执行完毕。

yield

表达式会返回一个值，并且暂停函数的执行，同时将控制权交还给调用者。当再次调用

next()

时，函数会从

yield

的下一行继续执行。

举个例子，我们用一个简单的Generator来模拟一个任务流：

function* taskRunner() {
  console.log('任务A开始');
  yield '等待任务A完成'; // 暂停，等待外部通知
  console.log('任务B开始');
  yield '等待任务B完成'; // 再次暂停
  console.log('所有任务完成');
}

const runner = taskRunner();

console.log(runner.next().value); // 输出：等待任务A完成
// 假设这里执行了一些异步操作，然后通知Generator继续
console.log(runner.next().value); // 输出：等待任务B完成
// 再次异步操作
console.log(runner.next().value); // 输出：所有任务完成
console.log(runner.next().done); // 输出：true

你看，通过

yield

和

next()

，我们手动控制了函数的执行流程，实现了任务的协作式调度。这对于处理一系列依赖关系的异步操作非常有用。不过，直接使用Generator来管理复杂的异步流会引入不少样板代码，比如手动调用

next()

，处理Promise的解析等等，这让代码看起来还是有些繁琐。

从Generator到async/await：JavaScript异步编程的演进与协程的最终形态

听脑AI

听脑AI语音，一款专注于音视频内容的工作学习助手，为用户提供便捷的音视频内容记录、整理与分析功能。

下载

如果说Generator是JavaScript协程的“骨架”，那么

async/await

就是给这个骨架穿上了华丽的“外衣”，让它变得更加易用和优雅。

async/await

是ES2017引入的语法糖，它构建在Promise和Generator之上，旨在让异步代码的编写体验无限接近同步代码。

一个

async

函数总是返回一个Promise。在

async

函数内部，你可以使用

await

关键字来“等待”一个Promise的解决。当

await

遇到一个Promise时，它会暂停

async

函数的执行，直到那个Promise被解决（fulfilled）或拒绝（rejected）。一旦Promise解决，

await

会返回解决的值，然后

async

函数会从暂停的地方继续执行。如果Promise被拒绝，

await

会抛出一个错误，你可以用

try...catch

来捕获它，就像处理同步错误一样。

function simulateAsyncOperation(ms, value) {
  return new Promise(resolve => setTimeout(() => resolve(value), ms));
}

async function processData() {
  console.log('开始处理数据...');
  try {
    const step1Result = await simulateAsyncOperation(1000, '数据A获取成功');
    console.log(step1Result);

    const step2Result = await simulateAsyncOperation(500, '数据B处理成功');
    console.log(step2Result);

    console.log('所有数据处理完成');
    return '最终结果';
  } catch (error) {
    console.error('处理数据时发生错误:', error);
    throw error; // 向上抛出错误
  }
}

processData().then(finalResult => {
  console.log('async函数返回:', finalResult);
}).catch(err => {
  console.error('捕获到async函数外的错误:', err);
});

console.log('主线程继续执行，不等待async函数');

这段代码看起来是不是比Generator的例子清晰多了？