JavaScript中的Promise使用详解


Posted in Javascript onJune 24, 2015

许多的语言,为了将异步模式处理得更像平常的顺序,都包含一种有趣的方案库,它们被称之为promises,deferreds,或者futures。JavaScript的promises ,可以促进关注点分离,以代替紧密耦合的接口。 本文讲的是基于Promises/A 标准的JavaScript promises。[http://wiki.commonjs.org/wiki/Promises/A]

Promise的用例:

  •     执行规则
  •     多个远程验证
  •     超时处理
  •     远程数据请求
  •     动画
  •     将事件逻辑从应用逻辑中解耦
  •     消除回调函数的恐怖三角
  •     控制并行的异步操作

JavaScript promise是一个承诺将在未来返回值的对象。是具有良好定义的行为的数据对象。promise有三种可能的状态:

  1.     Pending(待定)
  2.     Rejected(拒绝)
  3.     Resolved(已完成)

一个已经拒绝或者完成的承诺属于已经解决的。一个承诺只能从待定状态变成已经解决的状态。之后,承诺的状态就不变了。承诺可以在它对应的处理完成之后很久还存在。也就是说,我们可以多次取得处理结果。我们通过调用promise.then()来取得结果,这个函数一直到承诺对应的处理结束才会返回。我们可以灵活的串联起一堆承诺。这些串联起来的“then”函数应该返回一个新的承诺或者最早的那个承诺。
通过这个样式,我们可以像写同步代码一样来写非同步代码。主要是通过组合承诺来实现:

  •     堆栈式任务:多处散落在代码中的,对应同一个承诺。
  •     并行任务:多个承诺返回同一个承诺。
  •     串行任务:一个承诺,然后接着执行另一个承诺。
  •     上面几种的组合。

为什么要这么麻烦?只用基本的回调函数不行吗?

回调函数的问题

回调函数适合简单的重复性事件,例如根据点击来让一个表单有效,或者保存一个REST调用的结果。回调函数还会使代码形成一个链,一个回调函数调用一个REST函数,并为REST函数设置一个新的回调函数,这个新的回调函数再调用另一个REST函数,依此类推。代码的横向增长大于纵向的增长。回调函数看起来很简单,直到我们需要一个结果,而且是立刻就要,马上就用在下一行的计算中。

'use strict';
var i = 0;
function log(data) {console.log('%d %s', ++i, data); };
 
function validate() {
  log("Wait for it ...");
  // Sequence of four Long-running async activities
  setTimeout(function () {
   log('result first');
   setTimeout(function () {
     log('result second');
     setTimeout(function () {
      log('result third');
      setTimeout(function () {
        log('result fourth')
      }, 1000);
     }, 1000);
   }, 1000);
  }, 1000);
 
};
validate();

我使用timeout来模拟异步操作。管理异常的方法是痛苦的,很容易玩漏下游行为。当我们编写回调,那么代码组织变得混乱。图2显示了一个模拟验证流可以运行在NodeJS REPL。在下一节,我们将从pyramid-of-doom模式迁移到一个连续的promise。

Figure
 

'use strict';
var i = 0;
function log(data) {console.log('%d %s', ++i, data); };
 
// Asynchronous fn executes a callback result fn
function async(arg, callBack) {
  setTimeout(function(){
   log('result ' + arg);
   callBack();
  }, 1000);
};
 
function validate() {
  log("Wait for it ...");
  // Sequence of four Long-running async activities
  async('first', function () {
   async('second',function () {
     async('third', function () {
      async('fourth', function () {});
     });
   });
  });
};
validate();

在NodeJS REPL执行的结果
 

$ node scripts/examp2b.js
1 Wait for it ...
2 result first
3 result second
4 result third
5 result fourth
$

 

我曾经遇到一个AngularJS动态验证的情况,根据对应表的值,动态的限制表单项的值。限制项的有效值范围被定义在REST服务上。

我写了一个调度器,根据请求的值,去操作函数栈,以避免回调嵌套。调度器从栈中弹出函数并执行。函数的回调会在结束时重新调用调度器,直到栈被清空。每次回调都记录所有从远程验证调用返回的验证错误。

我认为我写的玩意儿是一种反模式。如果我用Angular的$http调用提供的promise,在整个验证过程中我的思维会更近似线性形式,就像同步编程。平展的promise链是可读的。继续...
 
使用Promises

其中采用了kew promise库。Q库同样适用。要使用该库,首先使用npm将kew库导入到NodeJS,然后加载代码到NodeJS REPL。

Figure
 

'use strict';
var Q = require('kew');
var i = 0;
 
function log(data) {console.log('%d %s', ++i, data); };
 
// Asynchronous fn returns a promise
function async(arg) {
  var deferred = Q.defer();
  setTimeout(function () {
    deferred.resolve('result ' + arg);\
  }, 1000);
  return deferred.promise;
};
 
// Flattened promise chain
function validate() {
  log("Wait for it ...");
  async('first').then(function(resp){
    log(resp);
    return async('second');
  })
  .then(function(resp){
    log(resp);
    return async('third')
  })
  .then(function(resp){
    log(resp);
    return async('fourth');
  })
  .then(function(resp){
    log(resp);
  }).fail(log);
};
validate();

输出和使用嵌套回调时相同:
 

$ node scripts/examp2-pflat.js
1 Wait for it ...
2 result first
3 result second
4 result third
5 result fourth
$

该代码稍微“长高”了,但我认为更易于理解和修改。更易于加上适当的错误处理。在链的末尾调用fail用于捕获链中错误,但我也可以在任何一个then里面提供一个reject的处理函数做相应的处理。

服务器 或 浏览器

Promises在浏览器中就像在NodeJS服务器中一样有效。下面的地址, http://jsfiddle.net/mauget/DnQDx/,指向JSFiddle的一个展示如何使用一个promise的web页面。 JSFiddle所有的代码是可修改的。我故意操作随意动作。你可以试几次得到相反的结果。它是可以直接扩展到多个promise链, 就像前面NodeJS例子。

JavaScript中的Promise使用详解

并行 Promises

考虑一个异步操作喂养另一个异步操作。让后者包括三个并行异步行为,反过来,喂最后一个行动。只有当所有平行的子请求通过才能通过。这是灵感来自偶遇一打MongoDB操作。有些是合格的并行操作。我实现了promises的流流程图。

JavaScript中的Promise使用详解

我们怎么会模拟那些在该图中心行的并行promises?关键是,最大的promise库有一个全功能,它产生一个包含一组子promises的父promie。当所有的子promises通过,父promise通过。如果有一个子promise拒绝,父promise拒绝。
 

让十个并行的promises每个都包含一个文字promise。只有当十个子类通过或如果任何子类拒绝,最后的then方法才能完成。

Figure
 

var promiseVals = ['To ', 'be, ', 'or ',
  'not ', 'to ', 'be, ', 'that ',
  'is ', 'the ', 'question.'];
 
var startParallelActions = function (){
  var promises = [];
 
  // Make an asynchronous action from each literal
  promiseVals.forEach(function(value){
    promises.push(makeAPromise(value));
  });
 
  // Consolidate all promises into a promise of promises
  return Q.all(promises);
};
 
startParallelActions ().then( . . .

下面的地址, http://jsfiddle.net/mauget/XKCy2/,针对JSFiddle在浏览器中运行十个并行promises,随机的拒绝或通过。这里有完整的代码用于检查和变化if条件。重新运行,直到你得到一个相反的完成。JavaScript中的Promise使用详解

孕育 Promise

许多api返回的promise都有一个then函数——他们是thenable。通常我只是通过then处理thenable函数的结果。然而,$q,mpromise,和kew库拥有同样的API用于创建,拒绝,或者通过promise。这里有API文档链接到每个库的引用部分。我通常不需要构造一个promise,除了本文中的包装promise的未知描述和timeout函数。请参考哪些我创建的promises。

Promise库互操作

大多数JavaScript promise库在then级别进行互操作。你可以从一个外部的promise创建一个promise,因为promise可以包装任何类型的值。then可以支持跨库工作。除了then,其他的promise函数则可能不同。如果你需要一个你的库不包含的函数,你可以将一个基于你的库的promise包装到一个新的,基于含有你所需函数的库创建的promise里面。例如,JQuery的promise有时为人所诟病。那么你可以将其包装到Q,$q,mpromise,或者kew库的promise中进行操作。
 
结语

现在我写了这篇文章,而一年前我却是犹豫要不要拥抱promise的那个。我只是单纯地想完成一项工作。 我不想学习新的API,或是打破我原来的代码(因为误解了promise)。我曾经如此错误地认为!当我下了一点注时,就轻易就赢得了可喜的成果。

在这篇文章中,我已经简单给出了一个单一的promise,promise链,和一个并行的promise的promise的的例子。 Promises不难使用。如果我可以使用它们,任何人都可以。 要查看完整的概念,我支持你点击专家写的参考指南。从Promises/A 的参考开始,从事实上的标准JavaScript的Promise 开始。

Javascript 相关文章推荐
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 #Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 #Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 #Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 #Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 #Javascript
浅析Node.js中的内存泄漏问题
Jun 23 #Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 #Javascript
You might like
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
PHP读取xml方法介绍
2013/01/12 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
常用的javascript function代码
2008/05/23 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
super()与this()的区别
2016/01/17 面试题
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
给同学的道歉信
2014/01/16 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
导游词之西递宏村
2019/12/10 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
用CSS3画一个爱心
2021/04/27 HTML / CSS
Python IO文件管理的具体使用
2022/03/20 Python
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技