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#。有兴趣的朋友可以查看《async和await之异步编程学习》文章,对c#与javascript的对比。
Promise, Generator, async/await的渐进理解的更多相关文章
- Promise 和async/await 的使用理解
Promise 和async/await 的使用理解 1. new Promise时就会开始执行语句. new Promise(resolve => resolove('成功信息') ) ...
- callback vs async.js vs promise vs async / await
需求: A.依次读取 A|B|C 三个文件,如果有失败,则立即终止. B.同时读取 A|B|C 三个文件,如果有失败,则立即终止. 一.callback 需求A: let read = functio ...
- 一个例子读懂 JS 异步编程: Callback / Promise / Generator / Async
JS异步编程实践理解 回顾JS异步编程方法的发展,主要有以下几种方式: Callback Promise Generator Async 需求 显示购物车商品列表的页面,用户可以勾选想要删除商品(单选 ...
- Promise和async await详解
本文转载自Promise和async await详解 Promise 状态 pending: 初始状态, 非 fulfilled 或 rejected. fulfilled: 成功的操作. rejec ...
- node.js异步控制流程 回调,事件,promise和async/await
写这个问题是因为最近看到一些初学者用回调用的不亦乐乎,最后代码左调来又调去很不直观. 首先上结论:推荐使用async/await或者co/yield,其次是promise,再次是事件,回调不要使用. ...
- Promise及Async/Await
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪 ...
- 异步Promise及Async/Await最完整入门攻略
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪圈, ...
- “setTimeout、Promise、Async/Await 的区别”题目解析和扩展
解答这个题目之前,先回顾下JavaScript的事件循环(Event Loop). JavaScript的事件循环 事件循环(Event Loop):同步和异步任务分别进入不同的执行"场所& ...
- promise 进阶 —— async / await 结合 bluebird
一.背景 1.Node.js 异步控制 在之前写的 callback vs async.js vs promise vs async / await 里,我介绍了 ES6 的 promise 和 ES ...
随机推荐
- 简述Action+Service +Dao 功能
转载:http://blog.csdn.net/inter_peng/article/details/41021727 1. Action/Service/DAO简介: Action是管理业务(Ser ...
- 让 Homebrew 走代理更新 + brew 管理 node 版本
0.前言 环境:MacOS 背景:整理下今天所做的配置. 1. 让 Homebrew 走代理更新 brew update 就卡住了,即使开了 shadowsocks 也不行.因为 shadowsock ...
- 如何用plugman编辑和添加cordova插件
1.安装工具 进入nodejs, 安装工具plugman,管理插件,输入命令npm install -g plugman 等待下载安装 2.使用plugman命令生成插件框架 cmd 进入用于生成插件 ...
- 单片机开发——01工欲善其事必先利其器(Keil软件安装破解)
本文是博主<单片机开发>博客第一篇文章,主要讲述51单片机编程软件Keil uVision4的安装及破解过程. 1. Keil uVision4安装包文件 PATH:链接 ...
- city-picker插件使用-移动h5三级联动
首先访问该链接:http://www.jq22.com/jquery-info12914 看看是否是你要找的三级联动插件,(主要看注释的部分!) 好了,不知道是不是我傻,没有找到初始化数据的方法,本人 ...
- AspectJ切入点语法详解
在看这篇文章前,建议首先看下 spring aop与aspectj的区别 aop是对oop的补充. 参阅:https://blog.csdn.net/column/details/aspectj.ht ...
- 附录C--拉格朗日对偶性
1.原始问题 假设$f(x)$,$c_i(x)$,$h_j(x)$是定义在$R^n$上的连续可微函数,$x \in R^n$.考虑以下三类优化问题. 1.无约束的优化问题: \begin{align* ...
- SublimeText 自带格式化代码功能
其实sublime自身就有格式化命令,就不再安装插件,位置在[Preferences]->[Key Bindings]->[User]中, 中文版的位置在 [首选项]->[按键 ...
- Centos7 编译安装Nginx 教程
相信经过上篇博文的学习,聪明的你已经学会了如何在Centos7 上通过yum 方式安装Nginx ,但是有时候有些场景或者特俗情况下,我们往往需要通过编译源码方式安装,以便于更灵活地定制我们的Ngin ...
- 在使用MFC对话框时遇到的用户交互
有时我们需要点击对话框上的一个按钮的时候,对话框隐藏起来,然后执行完某个操作后,对话框又弹出来, 这时我们可以使用BeginEditorCommand()和CompleteEditorCommand( ...