关于 JavaScript 异步编程学习顺序

[toFrankie]

前段时间辞职在家，抽空写了几篇关于 ES6+ 中 Promise、Generator、Async 的文章。写完之后，才发现原先并没有很好地理解“异步编程”，事后有点恍然大悟的意思。

个人认为要写好 JavaScript 异步编程，学习顺序如下：

• 事件循环机制
• Promise 对象
• 迭代器 Iterator
• 生成器 Generator
• Generator 函数与 Thunk 函数
• Async/Await 函数

我们都知道 JavaScript 是单线程的，它通过事件循环（Event Loop）机制去实现非阻塞。这属于必须掌握的内容，包括同步任务、异步任务（微任务、宏任务），这是学习其他内容的前提。

在 ES6 之前，通常通过回调函数、事件监听等方式去处理异步操作。当 ES6 标准正式发布之后，提供了全新的 Promise 对象、Generator 函数。

Promise 对象干掉了“地狱回调”（Callback Hell），但容易纵向发展，即一堆的 then()、catch() 处理。个人认为 Generator 才是使得 ES6+ 异步编程更强大的功臣。

但在 Generator 之前，应该先要了解 Iterator 迭代器。迭代器是一种机制，是一种接口。为各种不同的数据结构提供了统一的访问机制。迭代器不能完全算是“全新”的东西，只是在 ES6 中被写入标准，并为原有（如数组、字符串）、新增（如Set、Map）的数据结构实现了 Iterator 接口。其实我们很多常用方便的 ES6 语法都是利用迭代器 Iterator 接口实现的。例如 for...of、数组解构、扩展运算符、new Set()、Promise.all() 等等。

由于调用 Generator 函数，返回一个生成器对象，该对象本身就是一个可迭代对象（具有 Iterator 接口），也可以利用 for...of 等去遍历它。Generator 函数还是实现自定义迭代器的好方法。

而 Generator 函数的全新而独特的调用机制，才是它强大的原因，所以应该要学会它，并且要了解怎样写一个执行器去自动执行生成器对象。这个才是实际编程中最长用到的。

等你彻底了解 Generator 函数之后，Async 就是小菜一碟，它本质上就是 Generator + Promise + 自定义执行器的组合。

附上几篇相关的文章：

• JavaScript 事件循环（含宏任务与微任务）
• 细读 ES6 | Promise 上篇
• 细读 ES6 | Promise 下篇
• 细读 ES6 | Iterator 迭代器
• 细读 ES6 | Generator 生成器
• Thunk 函数与 Generator 函数
• 细读 ES6 | async/await
• 关于 Await、Promise 执行顺序差异问题