Promise, Generator, async/await的渐进理解
作为前端开发者的伙伴们,肯定对promise,generator,async/await非常熟悉不过了。promise绝对是烂记于心,而async/await却让使大伙们感觉到爽(原来异步可以这么简单)。可回头来梳理他们的关联时,你惊讶的发现,他们是如此的密切相关。
一、三者关系与发展史
我对他们三者之间的关联理解如上图所示,promise是基础,generator和async/await串连多个promise的同步执行,也就是把promise的异步特性变为同步,编程更爽。当然generator的yield也可以跟非promise类型的对象,对于generator更可以理解为迭代器。而async/await则是多个promise同步执行的简单方法。
但我们不难发现在处理promise的时候generator和asnyc/await的返回结果也会一个promise,你可以按照一个标准的promise进行处理。
发展史:
本人最先接触promise是jquery的deferred对象,然后就出现了bluebird这类实现promise a+规范的库,在后来就是es6对他的原生实现,以及对generator的加入,再后来async/await又出现了。
二、实例代码对比
从看到上述代码,对多个异步请求的处理方案从promise->generator->async/await的变迁,代码量越来越少,理解起来也更为简单。当然输出结果如下:
1. four:延迟一秒输出
2. fivesix:延迟两秒输出,说明await真实同步执行的
三、其他
1. 本文章只是本人对promise,generator,async/await的简单理解,希望对部分小伙伴所有帮助。
2. 当然async/await不是javascript的特色,在其他语言中也是有实现的,如:java, c#。有兴趣的朋友可以查看《》文章,对c#与javascript的对比。
推荐阅读
-
async/await与promise(nodejs中的异步操作问题)
-
详解koa2学习中使用 async 、await、promise解决异步的问题
-
JS异步编程 (2) - Promise、Generator、async/await
-
深入理解ES7的async/await的用法
-
Promise, Generator, async/await的渐进理解
-
.Net异步关键字async/await的最终理解
-
setTimeout、Promise、Async/Await 的执行顺序
-
js中promise方案、async和await方案和传统方案来处理异步回调的问题
-
理解 JavaScript 的 async/await
-
Async/Await替代Promise的6个理由