浅析Javascript ES6中的原生Promise


Posted in Javascript onAugust 25, 2016

前言

一个 Promise 对象可以理解为一次将要执行的操作(常常被用于异步操作),使用了 Promise 对象之后可以用一种链式调用的方式来组织代码,让代码更加直观。而且由于 Promise.all 这样的方法存在,可以让同时执行多个操作变得简单。

Promise的兴起,是因为异步方法调用中,往往会出现回调函数一环扣一环的情况。这种情况导致了回调金字塔问题的出现。不仅代码写起来费劲又不美观,而且问题复杂的时候,阅读代码的人也难以理解。

举例如下:

db.save(data, function(data){
 // do something...
 db.save(data1, function(data){
 // do something...
 db.save(data2, function(data){
  // do something...
  done(data3); // 返回数据
 })
 });
});

假设有一个数据库保存操作,一次请求需要在三个表中保存三次数据。那么我们的代码就跟上面的代码相似了。这时候假设在第二个db.save出了问题怎么办?基于这个考虑,我们又需要在每一层回调中使用类似try...catch这样的逻辑。这个就是万恶的来源,也是node刚开始广为诟病的一点。

另外一个缺点就是,假设我们的三次保存之间并没有前后依赖关系,我们仍然需要等待前面的函数执行完毕, 才能执行下一步,而无法三个保存并行,之后返回一个三个保存过后需要的结果。(或者说实现起来需要技巧)

不幸的是,在我刚开始接触node的时候,我写了大量这样的hell。

后来因为还是写前端代码多一些,我接触了ES6,发现了一个解决回调深渊的利器Promise。

其实早在ES6的Promise之前,Q,when.js,bluebird等等库早就根据Promise标准(参考Promise/A+)造出了自己的promise轮子。
(看过一篇文章,我觉得很有道理。里面说,不要扩展内置的原生对象。这种做法是不能面向未来的。所以这里有一个提示:使用扩展原生Promise的库时,需要谨慎。)

这里仅讨论原生的Promise。

ES6 Promise

Promise对象状态

在详解Promise之前,先来点理论:

Promise/A+规范, 规定Promise对象是一个有限状态机。

它三个状态:

     1、pending(执行中)

     2、fulfilled(成功)

     3、reject(拒绝)

其中pending为初始状态,fulfilledrejected为结束状态(结束状态表示promise的生命周期已结束)。

状态转换关系为:

pending->fulfilled,pending->rejected。

随着状态的转换将触发各种事件(如执行成功事件、执行失败事件等)。

Promise形式

Promise的长相就像这样子:

var promise = new Promise(function func(resolve, reject){
 // do somthing, maybe async
 if (success){
 return resolve(data);
 } else {
 return reject(data);
 }
});

promise.then(function(data){
 // do something... e.g
 console.log(data);
}, function(err){
 // deal the err.
})

这里的变量promise是Promise这个对象的实例。

promise对象在创建的时候会执行func函数中的逻辑。

逻辑处理完毕并且没有错误时,resolve这个回调会将值传递到一个特殊的地方。这个特殊的地方在哪呢?就是下面代码中的then,我们使用then中的回调函数来处理resolve后的结果。比如上面的代码中,我们将值简单的输出到控制台。如果有错误,则rejectthen的第二个回调函数中,对错误进行处理。

配合上面的有限状态机的理论,我们知道在Promise构造函数中执行回调函数代码时,状态为pendingresolve之后状态为fulfilledreject之后状态为reject

Promise数据流动

以上是promise的第一次数据流动情况。

比较funny的是,promise的then方法依然能够返回一个Promise对象,这样我们就又能用下一个then来做一样的处理。

第一个then中的两个回调函数决定第一个then返回的是一个什么样的Promise对象。

假设第一个then的第一个回调没有返回一个Promise对象,那么第二个then的调用者还是原来的Promise对象,只不过其resolve的值变成了第一个then中第一个回调函数的返回值。

假设第一个then的第一个回调函数返回了一个Promise对象,那么第二个then的调用者变成了这个新的Promise对象,第二个then等待这个新的Promise对象resolve或者reject之后执行回调。

话虽然饶了一点,但是我自我感觉说的还是很清楚的呢。哈哈~

如果任意地方遇到了错误,则错误之后交给遇到的第一个带第二个回调函数的then的第二个回调函数来处理。可以理解为错误一直向后reject, 直到被处理为止。

另外,Promise对象还有一个方法catch,这个方法接受一个回调函数来处理错误。

即:

promise.catch(function(err){
 // deal the err.
})

假设对错误的处理是相似的,这个方法可以对错误进行集中统一处理。所以其他的then方法就不需要第二个回调啦~

控制并发的Promise

Promise有一个"静态方法"——Promise.all(注意并非是promise.prototype), 这个方法接受一个元素是Promise对象的数组。

这个方法也返回一个Promise对象,如果数组中所有的Promise对象都resolve了,那么这些resolve的值将作为一个数组作为Promise.all这个方法的返回值的(Promise对象)的resolve值,之后可以被then方法处理。如果数组中任意的Promise被reject,那么该reject的值就是Promise.all方法的返回值的reject值.

很op的一点是:

then方法的第一个回调函数接收的resolve值(如上所述,是一个数组)的顺序和Promise.all中参数数组的顺序一致,而不是按时间顺序排序。

还有一个和Promise.all相类似的方法Promise.race,它同样接收一个数组,只不过它只接受第一个被resolve的值。

将其他对象变为Promise对象

Promise.resovle方法,可以将不是Promise对象作为参数,返回一个Promise对象。

有两种情形:

假设传入的参数没有一个.then方法,那么这个返回的Promise对象变成了resolve状态,其resolve的值就是这个对象本身。

假设传入的参数带有一个then方法(称为thenable对象), 那么将这个对象的类型变为Promise,其then方法变成Promise.prototype.then方法。

Promise是解决异步的方案吗?

最后说一点很重要的事:Promise的作用是解决回调金字塔的问题,对于控制异步流程实际上没有起到很大的作用。真正使用Promise对异步流程进行控制,我们还要借助ES6 generator函数。(例如Tj大神的co库的实现)。

然而ES7将有一个更加牛逼的解决方案:async/await,这个方案类似于co,但是加了原生支持。拭目以待吧。

总结

以上就是关于Javascript ES6中原生Promise的全部内容了,希望本文的内容对大家学习ES6能有所帮助。如果有疑问可以留言交流。

Javascript 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
理解Javascript图片预加载
Feb 23 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
JS实现图片切换特效
Dec 23 Javascript
微信JS接口大全
Aug 25 #Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 #Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 #Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 #Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 #Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 #Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 #Javascript
You might like
PHP下10件你也许并不了解的事情
2008/09/11 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
破解Session cookie的方法
2006/07/28 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
layui导航栏实现代码
2017/05/19 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
学期研究性学习个人的自我评价
2014/01/09 职场文书
小学生评语大全
2014/04/18 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
总经理司机岗位职责
2015/04/10 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
环保宣传语大全
2015/07/13 职场文书
新闻稿件写作范文
2015/07/18 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server