前言
前段时间辞职在家,抽空写了几篇关于 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 + 自定义执行器的组合。