JS如何实现协程控制

javascript中没有原生协程，但可通过生成器和async/await模拟；1. 生成器（function*）使用yield实现显式暂停与恢复，通过next()方法驱动，支持双向通信，适用于自定义迭代器、状态机及复杂异步控制；2. async/await基于promise，用await暂停异步函数执行直至promise解决，自动恢复，简化异步代码，提升可读性；3. 两者不等价：生成器是底层控制原语，灵活但需手动驱动，async/await是异步场景的高级语法糖，自动与事件循环协作；4. 选择async/await处理常规异步操作，追求可读性和维护性，与promise生态集成；选择生成器实现自定义迭代、协作式多任务、状态机或需细粒度控制的异步框架；二者可结合使用，生成器驱动async/await流程，实现更强大的控制流管理。

JavaScript本身并没有传统意义上像Go语言或Python协程库那样的原生“协程”概念，因为它是一个单线程、基于事件循环的语言。但我们完全可以通过其提供的特性来模拟或实现类似协程的控制流，最核心的两种方式是使用生成器（Generators）和

async/await

解决方案

要实现JS中的协程控制，我们主要依赖两种强大的语言特性：生成器（Generators）和

async/await

生成器提供了一种显式的、可暂停的函数执行机制。一个生成器函数通过

function*

yield

next()

yield

yield

而

async/await

async

await

async

await

JS中的生成器（Generators）如何实现协作式暂停与恢复？

说起生成器，我觉得它简直是JavaScript里一个被低估的宝藏。它提供了一种非常直接的方式来控制函数的执行流程，允许你在函数执行的任意点“暂停”下来，然后根据需要再“恢复”执行。这和传统意义上的协程（co-routine）概念非常契合，因为它们都是协作式的——函数主动让出控制权，而不是被动地被中断。

一个生成器函数通过在

function

*

function* myGenerator() { ... }

yield

yield

yield

当你调用一个生成器函数时，它并不会立即执行里面的代码，而是返回一个“生成器对象”（Generator Object），这个对象本身就是一个迭代器。通过调用这个生成器对象的

next()

next()

value

yield

done

来看个例子，感受一下这种“暂停与恢复”的魅力：

function* taskRunner() {
  console.log('任务A：开始');
  yield '等待外部指令1'; // 第一次暂停
  console.log('任务B：进行中');
  yield '等待外部指令2'; // 第二次暂停
  console.log('任务C：完成');
  return '所有任务完成'; // 生成器结束
}

const runner = taskRunner();

console.log(runner.next()); // { value: '等待外部指令1', done: false }
// 此时，taskRunner 在 '任务A：开始' 之后暂停了。
// 我们可以做一些其他事情...
console.log('外部世界：做点别的事情...');

console.log(runner.next()); // { value: '等待外部指令2', done: false }
// taskRunner 从上次暂停的地方继续，执行了 '任务B：进行中'，然后再次暂停。
console.log('外部世界：又做了一些事情...');

console.log(runner.next()); // { value: '所有任务完成', done: true }
// taskRunner 继续执行，直到结束，并返回了最终值。
console.log('外部世界：生成器已完成。');

在这个例子里，

taskRunner

yield

next()

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

Async/Await与协程控制：它们是等价的吗？

这是一个经常被问到的问题，也是一个很容易产生误解的地方。在我看来，

async/await

async/await

async

await

async

async

await

来看个

async/await

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

async function fetchData() {
  console.log('开始获取数据...');
  await simulateAsyncOperation(1000); // 等待1秒
  console.log('数据A获取完成。');

  await simulateAsyncOperation(500); // 再等待0.5秒
  console.log('数据B获取完成。');

  return '所有数据已就绪';
}

fetchData().then(result => {
  console.log(result);
});

console.log('主线程继续执行，不会被阻塞。');

在这个例子中，

fetchData

await

next()

所以，两者不等价。生成器提供的是更底层的、显式的、可编程的暂停/恢复机制，你可以用它来构建各种迭代器、状态机，甚至可以自己实现一个异步流程控制的库。而

async/await

async/await

何时选择生成器，何时选择Async/Await？

选择生成器还是

async/await

选择

async/await

1. 处理绝大多数异步操作： 当你需要进行网络请求、文件读写、定时器等基于Promise或回调的异步操作时，

   async/await

   登录后复制
   是首选。它让异步代码逻辑清晰，避免了回调地狱，可读性极高。
2. 代码可读性和维护性优先： 如果你的主要目标是让异步代码看起来像同步代码一样直观，那么

   async/await

   登录后复制
   无疑是最好的选择。它极大地简化了错误处理（使用

   try...catch

   登录后复制
   ），使得异步流程的推理变得容易。
3. 与现有Promise生态系统集成： 现代JavaScript的异步API几乎都返回Promise，

   async/await

   登录后复制
   与它们无缝衔接。

选择生成器（Generators）的场景则相对特定，通常是：

1. 实现自定义迭代器或无限序列： 如果你需要创建自定义的迭代行为，例如一个斐波那契数列生成器，或者一个能够按需生成数据流的管道，生成器是完美的选择。它允许你惰性地生成值，避免一次性计算所有结果。
2. 构建复杂的异步流程控制框架： 就像前面提到的Redux Saga，它利用生成器的

   yield

   登录后复制
   来暂停和控制副作用（如异步API调用），允许开发者以同步的方式编写复杂的异步逻辑。在这种场景下，生成器提供了比

   async/await

   登录后复制
   更细粒度的控制能力，你可以

   yield

   登录后复制
   出任何东西，而不仅仅是Promise。
3. 模拟协作式多任务处理（非阻塞的同步计算）： 设想一个需要执行大量计算的函数，为了不阻塞UI，你希望它能定期“让出”控制权。你可以用生成器来实现，每次计算一小步，然后

   yield

   登录后复制
   ，让事件循环有机会处理UI更新或其他任务，等到下次

   next()

   登录后复制
   调用时再继续计算。这在某些客户端长任务处理中非常有用。
4. 构建状态机： 生成器的

   yield

   登录后复制
   机制使其非常适合实现状态机，每个

   yield

   登录后复制
   点可以看作是一个状态转换点，外部通过

   next()

   登录后复制
   驱动状态的迁移。

总而言之，

async/await

async/await

以上就是JS如何实现协程控制的详细内容，更多请关注php中文网其它相关文章！