浅析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 相关文章推荐
Javascript学习笔记二 之 变量
Dec 15 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 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 echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
Python pymsql模块的使用
2020/09/07 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
如何查找网页漏洞
2016/06/22 面试题
酒店服务实习自我鉴定
2013/09/22 职场文书
大学生学业生涯规划
2014/01/05 职场文书
学生安全教育材料
2014/02/14 职场文书
高中生学习计划书
2014/09/15 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server