异步JavaScript编程中的Promise使用方法


Posted in Javascript onJuly 28, 2015

异步?

我在很多地方都看到过异步(Asynchronous)这个词,但在我还不是很理解这个概念的时候,却发现自己常常会被当做“已经很清楚”(* ̄? ̄)。

如果你也有类似的情况,没关系,搜索一下这个词,就可以得到大致的说明。在这里,我会对JavaScript的异步做一点额外解释。

看一下这段代码:

var start = new Date();
setTimeout(function(){
  var end = new Date();
  console.log("Time elapsed: ", end - start, "ms");
}, 500);
while (new Date - start < 1000) {};

这段代码运行后会得到类似Time elapsed: 1013ms这样的结果。 setTimeout()所设定的在未来500ms时执行的函数,实际等了比1000ms更多的时间后才执行。

要如何解释呢?调用setTimeout()时,一个延时事件被排入队列。然后,继续执行这之后的代码,以及更后边的代码,直到没有任何代码。没有任何代码后,JavaScript线程进入空闲,此时JavaScript执行引擎才去翻看队列,在队列中找到“应该触发”的事件,然后调用这个事件的处理器(函数)。处理器执行完成后,又再返回到队列,然后查看下一个事件。

单线程的JavaScript,就是这样通过队列,以事件循环的形式工作的。所以,前面的代码中,是用while将执行引擎拖在代码运行期间长达1000ms,而在全部代码运行完回到队列前,任何事件都不会触发。这就是JavaScript的异步机制。
JavaScript的异步难题

JavaScript中的异步操作可能不总是简单易行的。

Ajax也许是我们用得最多的异步操作。以jQuery为例,发起一个Ajax请求的代码一般是这样的:

// Ajax请求示意代码
$.ajax({
  url: url,
  data: dataObject,
  success: function(){},
  error: function(){}
});

这样的写法有什么问题吗?简单来说,不够轻便。为什么一定要在发起请求的地方,就要把success和error这些回调给写好呢?假如我的回调要做很多很多的事情,是要我想起一件事情就跑回这里添加代码吗?

再比如,我们要完成这样一件事:有4个供Ajax访问的url地址,需要先Ajax访问第1个,在第1个访问完成后,用拿到的返回数据作为参数再访问第2个,第2个访问完成后再第3个...以此到4个全部访问完成。按照这样的写法,似乎会变成这样:

$.ajax({
  url: url1,
  success: function(data){
    $.ajax({
      url: url2,
      data: data,
      success: function(data){
        $.ajax({
          //...
        });
      }  
    });
  }
})

你一定会觉得这种称为Pyramid of Doom(金字塔厄运)的代码看起来很糟糕。习惯了直接附加回调的写法,就可能会对这种一个传递到下一个的异步事件感到无从入手。为这些回调函数分别命名并分离存放可以在形式上减少嵌套,使代码清晰,但仍然不能解决问题。

另一个常见的难点是,同时发送两个Ajax请求,然后要在两个请求都成功返回后再做一件接下来的事,想一想如果只按前面的方式在各自的调用位置去附加回调,这是不是好像也有点难办?

适于应对这些异步操作,可以让你写出更优雅代码的就是Promise。
Promise上场

Promise是什么呢?先继续以前面jQuery的Ajax请求示意代码为例,那段代码其实可以写成这个样子:

var promise = $.ajax({
  url: url,
  data: dataObject
});
promise.done(function(){});
promise.fail(function(){});

这和前面的Ajax请求示意代码是等效的。可以看到,Promise的加入使得代码形式发生了变化。Ajax请求就好像变量赋值一样,被“保存”了起来。这就是封装,封装将真正意义上让异步事件变得容易起来。
封装是有用的

Promise对象就像是一个封装好的对异步事件的引用。想要在这个异步事件完成后做点事情?给它附加回调就可以了,不管附加多少个也没问题!

jQuery的Ajax方法会返回一个Promise对象(这是jQuery1.5重点增加的特性)。如果我有do1()、do2()两个函数要在异步事件成功完成后执行,只需要这样做:

promise.done(do1);
// Other code here.
promise.done(do2);

这样可要自由多了,我只要保存这个Promise对象,就在写代码的任何时候,给它附加任意数量的回调,而不用管这个异步事件是在哪里发起的。这就是Promise的优势。
正式的介绍

Promise应对异步操作是如此有用,以至于发展为了CommonJS的一个规范,叫做Promises/A。Promise代表的是某一操作结束后的返回值,它有3种状态:

  1.     肯定(fulfilled或resolved),表明该Promise的操作成功了。
  2.     否定(rejected或failed),表明该Promise的操作失败了。
  3.     等待(pending),还没有得到肯定或者否定的结果,进行中。

此外,还有1种名义上的状态用来表示Promise的操作已经成功或失败,也就是肯定和否定状态的集合,叫做结束(settled)。Promise还具有以下重要的特性:

  •     一个Promise只能从等待状态转变为肯定或否定状态一次,一旦转变为肯定或否定状态,就再也不会改变状态。
  •     如果在一个Promise结束(成功或失败,同前面的说明)后,添加针对成功或失败的回调,则回调函数会立即执行。

想想Ajax操作,发起一个请求后,等待着,然后成功收到返回或出现错误(失败)。这是否和Promise相当一致?

进一步解释Promise的特性还有一个很好的例子:jQuery的$(document).ready(onReady)。其中onReady回调函数会在DOM就绪后执行,但有趣的是,如果在执行到这句代码之前,DOM就已经就绪了,那么onReady会立即执行,没有任何延迟(也就是说,是同步的)。
Promise示例
生成Promise

Promises/A里列出了一系列实现了Promise的JavaScript库,jQuery也在其中。下面是用jQuery生成Promise的代码:

var deferred = $.Deferred();
deferred.done(function(message){console.log("Done: " + message)});
deferred.resolve("morin"); // Done: morin

jQuery自己特意定义了名为Deferred的类,它实际上就是Promise。$.Deferred()方法会返回一个新生成的Promise实例。一方面,使用deferred.done()、deferred.fail()等为它附加回调,另一方面,调用deferred.resolve()或deferred.reject()来肯定或否定这个Promise,且可以向回调传递任意数据。
合并Promise

还记得我前文说的同时发送2个Ajax请求的难题吗?继续以jQuery为例,Promise将可以这样解决它:

var promise1 = $.ajax(url1),
promise2 = $.ajax(url2),
promiseCombined = $.when(promise1, promise2);
promiseCombined.done(onDone);

$.when()方法可以合并多个Promise得到一个新的Promise,相当于在原多个Promise之间建立了AND(逻辑与)的关系,如果所有组成Promise都已成功,则令合并后的Promise也成功,如果有任意一个组成Promise失败,则立即令合并后的Promise失败。
级联Promise

再继续我前文的依次执行一系列异步任务的问题。它将用到Promise最为重要的.then()方法(在Promises/A规范中,也是用“有then()方法的对象”来定义Promise的)。代码如下:

var promise = $.ajax(url1);
promise = promise.then(function(data){
  return $.ajax(url2, data);
});
promise = promise.then(function(data){
  return $.ajax(url3, data);
});
// ...

Promise的.then()方法的完整形式是.then(onDone, onFail, onProgress),这样看上去,它像是一个一次性就可以把各种回调都附加上去的简便方法(.done()、.fail()可以不用了)。没错,你的确可以这样使用,这是等效的。

但.then()方法还有它更为有用的功能。如同then这个单词本身的意义那样,它用来清晰地指明异步事件的前后关系:“先这个,然后(then)再那个”。这称为Promise的级联。

要级联Promise,需要注意的是,在传递给then()的回调函数中,一定要返回你想要的代表下一步任务的Promise(如上面代码的$.ajax(url2, data))。这样,前面被赋值的那个变量才会变成新的Promise。而如果then()的回调函数返回的不是Promise,则then()方法会返回最初的那个Promise。

应该会觉得有些难理解?从代码执行的角度上说,上面这段带有多个then()的代码其实还是被JavaScript引擎运行一遍就结束。但它就像是写好的舞台剧的剧本一样,读过一遍后,JavaScript引擎就会在未来的时刻,依次安排演员按照剧本来演出,而演出都是异步的。then()方法就是让你能写出异步剧本的笔。
将Promise用在基于回调函数的API

前文反复用到的$.ajax()方法会返回一个Promise对象,这其实只是jQuery特意提供的福利。实际情况是,大多数JavaScript API,包括Node.js中的原生函数,都基于回调函数,而不是基于Promise。这种情况下使用Promise会需要自行做一些加工。

这个加工其实比较简单和直接,下面是例子:

var deferred = $.Deferred();
setTimeout(deferred.resolve, 1000);
deferred.done(onDone);

这样,将Promise的肯定或否定的触发器,作为API的回调传入,就变成了Promise的处理模式了。
Promise是怎么实现出来的?

本文写Promise写到这里,你发现了全都是基于已有的实现了Promise的库。那么,如果要自行构筑一个Promise的话呢?

位列于Promises/A的库列表第一位的Q可以算是最符合Promises/A规范且相当直观的实现。如果你想了解如何做出一个Promise,可以参考Q提供的设计模式解析。

限于篇幅,本文只介绍Promise的应用。我会在以后单独开一篇文章来详述Promise的实现细节。

作为JavaScript后续版本的ECMAScript 6将原生提供Promise,如果你想知道它的用法,推荐阅读JavaScript Promises: There and back again。
结语

Promise这个词顽强到不适合翻译,一眼之下都会觉得意义不明。不过,在JavaScript里做比较复杂的异步任务时,它的确可以提供相当多的帮助。

Javascript 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
js实现日历的简单算法
Jan 24 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 #Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 #Javascript
JavaScript编程中的Promise使用大全
Jul 28 #Javascript
javascript+html5实现绘制圆环的方法
Jul 28 #Javascript
学习Bootstrap组件之下拉菜单
Jul 28 #Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 #Javascript
深入理解JavaScript中的箭头函数
Jul 28 #Javascript
You might like
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
laravel5.6实现数值转换
2019/10/23 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
基于python log取对数详解
2018/06/08 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
会员活动策划方案
2014/08/19 职场文书
天猫活动策划方案
2014/08/21 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python