JavaScript Promise

在callback的模型里边,我们假设需要执行一个异步队列,代码看起来可能像这样:

[js] view plaincopy

  1. loadImg('a.jpg', function() {  
  2.     loadImg('b.jpg', function() {  
  3.         loadImg('c.jpg', function() {  
  4.             console.log('all done!');  
  5.         });  
  6.     });  
  7. });  

这也就是我们常说的回调金字塔,当异步的任务很多的时候,维护大量的callback将是一场灾难。当今Node.js大热,好像很多团队都要用它来做点东西以沾沾“洋气”,曾经跟一个运维的同学聊天,他们也是打算使用Node.js做一些事情,可是一想到js的层层回调就望而却步。

好,扯淡完毕,下面进入正题。

Promise可能大家都不陌生,因为Promise规范已经出来好一段时间了,同时Promise也已经纳入了ES6,而且高版本的chrome、firefox浏览器都已经原生实现了Promise,只不过和现如今流行的类Promise类库相比少些API。

所谓Promise,字面上可以理解为“承诺”,就是说A调用B,B返回一个“承诺”给A,然后A就可以在写计划的时候这么写:当B返回结果给我的时候,A执行方案S1,反之如果B因为什么原因没有给到A想要的结果,那么A执行应急方案S2,这样一来,所有的潜在风险都在A的可控范围之内了。

上面这句话,翻译成代码类似:

[js] view plaincopy

  1. var resB = B();  
  2. var runA = function() {  
  3.     resB.then(execS1, execS2);  
  4. };  
  5. runA();  

只看上面这行代码,好像看不出什么特别之处。但现实情况可能比这个复杂许多,A要完成一件事,可能要依赖不止B一个人的响应,可能需要同时向多个人询问,当收到所有的应答之后再执行下一步的方案。最终翻译成代码可能像这样:

[js] view plaincopy

  1. var resB = B();  
  2. var resC = C();  
  3. ...  
  4. var runA = function() {  
  5.     reqB  
  6.         .then(resC, execS2)  
  7.         .then(resD, execS3)  
  8.         .then(resE, execS4)  
  9.         ...  
  10.         .then(execS1);  
  11. };  
  12. runA();  

在这里,当每一个被询问者做出不符合预期的应答时都用了不同的处理机制。事实上,Promise规范没有要求这样做,你甚至可以不做任何的处理(即不传入then的第二个参数)或者统一处理。

好了,下面我们来认识下Promise/A+规范

  • 一个promise可能有三种状态:等待(pending)、已完成(fulfilled)、已拒绝(rejected)
  • 一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态,不能逆向转换,同时“完成”态和“拒绝”态不能相互转换
  • promise必须实现then方法(可以说,then就是promise的核心),而且then必须返回一个promise,同一个promise的then可以调用多次,并且回调的执行顺序跟它们被定义时的顺序一致
  • then方法接受两个参数,第一个参数是成功时的回调,在promise由“等待”态转换到“完成”态时调用,另一个是失败时的回调,在promise由“等待”态转换到“拒绝”态时调用。同时,then可以接受另一个promise传入,也接受一个“类then”的对象或方法,即thenable对象。

可以看到,Promise规范的内容并不算多,大家可以试着自己实现以下Promise。

以下是笔者自己在参考许多类Promise库之后简单实现的一个Promise,代码请移步promiseA

简单分析下思路:

构造函数Promise接受一个函数resolver,可以理解为传入一个异步任务,resolver接受两个参数,一个是成功时的回调,一个是失败时的回调,这两参数和通过then传入的参数是对等的。

其次是then的实现,由于Promise要求then必须返回一个promise,所以在then调用的时候会新生成一个promise,挂在当前promise的_next上,同一个promise多次调用都只会返回之前生成的_next

由于then方法接受的两个参数都是可选的,而且类型也没限制,可以是函数,也可以是一个具体的值,还可以是另一个promise。下面是then的具体实现:

[js] view plaincopy

  1. Promise.prototype.then = function(resolve, reject) {  
  2. var next = this._next || (this._next = Promise());  
  3. var status = this.status;  
  4. var x;  
  5. if('pending' === status) {  
  6.         isFn(resolve) && this._resolves.push(resolve);  
  7.         isFn(reject) && this._rejects.push(reject);  
  8. return next;  
  9.     }  
  10. if('resolved' === status) {  
  11. if(!isFn(resolve)) {  
  12.             next.resolve(resolve);  
  13.         } else {  
  14. try {  
  15.                 x = resolve(this.value);  
  16.                 resolveX(next, x);  
  17.             } catch(e) {  
  18. this.reject(e);  
  19.             }  
  20.         }  
  21. return next;  
  22.     }  
  23. if('rejected' === status) {  
  24. if(!isFn(reject)) {  
  25.             next.reject(reject);  
  26.         } else {  
  27. try {  
  28.                 x = reject(this.reason);  
  29.                 resolveX(next, x);  
  30.             } catch(e) {  
  31. this.reject(e);  
  32.             }  
  33.         }  
  34. return next;  
  35.     }  
  36. };  

这里,then做了简化,其他promise类库的实现比这个要复杂得多,同时功能也更多,比如还有第三个参数——notify,表示promise当前的进度,这在设计文件上传等时很有用。对then的各种参数的处理是最复杂的部分,有兴趣的同学可以参看其他类Promise库的实现。

在then的基础上,应该还需要至少两个方法,分别是完成promise的状态从pending到resolved或rejected的转换,同时执行相应的回调队列,即resolve()reject()方法。

到此,一个简单的promise就设计完成了,下面简单实现下两个promise化的函数:

[js] view plaincopy

  1. function sleep(ms) {  
  2. return function(v) {  
  3. var p = Promise();  
  4.         setTimeout(function() {  
  5.             p.resolve(v);  
  6.         });  
  7. return p;  
  8.     };  
  9. };  
  10. function getImg(url) {  
  11. var p = Promise();  
  12. var img = new Image();  
  13.     img.onload = function() {  
  14.         p.resolve(this);  
  15.     };  
  16.     img.onerror = function(err) {  
  17.         p.reject(err);  
  18.     };  
  19.     img.url = url;  
  20. return p;  
  21. };  

由于Promise构造函数接受一个异步任务作为参数,所以getImg还可以这样调用:

[js] view plaincopy

  1. function getImg(url) {  
  2. return Promise(function(resolve, reject) {  
  3. var img = new Image();  
  4.         img.onload = function() {  
  5.             resolve(this);  
  6.         };  
  7.         img.onerror = function(err) {  
  8.             reject(err);  
  9.         };  
  10.         img.url = url;  
  11.     });  
  12. };  

接下来(见证奇迹的时刻),假设有一个BT的需求要这么实现:异步获取一个json配置,解析json数据拿到里边的图片,然后按顺序队列加载图片,没张图片加载时给个loading效果

[js] view plaincopy

  1. function addImg(img) {  
  2.     $('#list').find('> li:last-child').html('').append(img);  
  3. };  
  4. function prepend() {  
  5.     $('<li>')  
  6.         .html('loading...')  
  7.         .appendTo($('#list'));  
  8. };  
  9. function run() {  
  10.     $('#done').hide();  
  11.     getData('map.json')  
  12.         .then(function(data) {  
  13.             $('h4').html(data.name);  
  14. return data.list.reduce(function(promise, item) {  
  15. return promise  
  16.                     .then(prepend)  
  17.                     .then(sleep(1000))  
  18.                     .then(function() {  
  19. return getImg(item.url);  
  20.                     })  
  21.                     .then(addImg);  
  22.             }, Promise.resolve());  
  23.         })  
  24.         .then(sleep(300))  
  25.         .then(function() {  
  26.             $('#done').show();  
  27.         });  
  28. };  
  29. $('#run').on('click', run);  

这里的sleep只是为了看效果加的,可猛击查看demo!当然,Node.js的例子可查看这里

在这里,Promise.resolve(v)静态方法只是简单返回一个以v为肯定结果的promise,v可不传入,也可以是一个函数或者是一个包含then方法的对象或函数(即thenable)。

类似的静态方法还有Promise.cast(promise),生成一个以promise为肯定结果的promise;

Promise.reject(reason),生成一个以reason为否定结果的promise。

我们实际的使用场景可能很复杂,往往需要多个异步的任务穿插执行,并行或者串行同在。这时候,可以对Promise进行各种扩展,比如实现Promise.all(),接受promises队列并等待他们完成再继续,再比如Promise.any(),promises队列中有任何一个处于完成态时即触发下一步操作。

标准的Promise

可参考html5rocks的这篇文章JavaScript Promises,目前高级浏览器如Chrome、Firefox都已经内置了Promise对象,提供更多的操作接口,比如Promise.all(),支持传入一个promises数组,当所有promises都完成时执行then,还有就是更加友好强大的异常捕获,应对日常的异步编程,应该足够了。

第三方库的Promise

现今流行的各大js库,几乎都不同程度的实现了Promise,如dojo,jQuery、Zepto、when.js、Q等,只是暴露出来的大都是Deferred对象,以jQuery(Zepto类似)为例,实现上面的getImg()

[js] view plaincopy

  1. function getImg(url) {  
  2. var def = $.Deferred();  
  3. var img = new Image();  
  4.     img.onload = function() {  
  5.         def.resolve(this);  
  6.     };  
  7.     img.onerror = function(err) {  
  8.         def.reject(err);  
  9.     };  
  10.     img.src = url;  
  11. return def.promise();  
  12. };  

当然,jQuery中,很多的操作都返回的是Deferred或promise,如animateajax

[js] view plaincopy

  1. // animate
  2. $('.box')  
  3.     .animate({'opacity': 0}, 1000)  
  4.     .promise()  
  5.     .then(function() {  
  6.         console.log('done');  
  7.     });  
  8. // ajax
  9. $.ajax(options).then(success, fail);  
  10. $.ajax(options).done(success).fail(fail);  
  11. // ajax queue
  12. $.when($.ajax(options1), $.ajax(options2))  
  13.     .then(function() {  
  14.         console.log('all done.');  
  15.     }, function() {  
  16.         console.error('There something wrong.');  
  17.     });  

jQuery还实现了done()fail()方法,其实都是then方法的shortcut。

处理promises队列,jQuery实现的是$.when()方法,用法和Promise.all()类似。

其他类库,这里值得一提的是when.js,本身代码不多,完整实现Promise,同时支持browser和Node.js,而且提供更加丰富的API,是个不错的选择。这里限于篇幅,不再展开。

尾声

我们看到,不管Promise实现怎么复杂,但是它的用法却很简单,组织的代码很清晰,从此不用再受callback的折磨了。

最后,Promise是如此的优雅!但Promise也只是解决了回调的深层嵌套的问题,真正简化JavaScript异步编程的还是Generator,在Node.js端,建议考虑Generator。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Pythonista

python之字符编码的重要思想

        unicode----->encode-------->utf-8

13720
来自专栏LuckQI

redis初识~String命令介绍

12730
来自专栏owent

C++11动态模板参数和type_traits

C++11标准里有动态模板参数已经是众所周知的事儿了。但是当时还有个主流编译器还不支持。 但是现在,主要的编译器。VC(Windows),GCC(Window...

11320
来自专栏用户2442861的专栏

java IO流之一 IO流介绍

     IO流指 的是输入输出流,用来处理设备上的数据。这里的设备指硬盘,内存,键盘录入,网络传输等。

15130
来自专栏极客编程

ECMAScript 6教程 (一)

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出 原文连接,博客地址为 http://www.cnblogs.co...

9820
来自专栏鸿的学习笔记

Python写的Python解释器(一)

导论 Byterun是一个用Python实现的Python解释器。它的结构类似于CPython(Python的主流实现方式)。

18720
来自专栏PHP在线

48条高效率的PHP优化写法

1 字符串 1.1 少用正则表达式 能用PHP内部字符串操作函数的情况下,尽量用他们,不要用正则表达式, 因为其效率高于正则。 没得说,正则最耗性能。 str_...

780110
来自专栏我的博客

if和else匹配问题以及switch问题

$b = 1; $a = 2; if ($a > 1) { echo ‘1’; if ($b > 2) { echo ‘2’; } } else ...

365110
来自专栏Python

python编码问题一点通

一、了解字符编码的知识储备   1. 文本编辑器存取文件的原理(nodepad++,pycharm,word)      打开编辑器就打开了启动了一个进程,是...

27380
来自专栏程序员宝库

48 条高效率的 PHP 优化写法

能用PHP内部字符串操作函数的情况下,尽量用他们,不要用正则表达式, 因为其效率高于正则。

25940

扫码关注云+社区

领取腾讯云代金券