本文同步自我的个人博客:
JavaScript 的 promises 事实标准称为 。ES6 的 Promise API 便遵循这个标准。
promises 的英文直译是“承诺,诺言”。但是在大神的《》文章里得知, 而是应该根据其音译——“普罗米修斯”,来翻译。普罗米修斯是希腊神话故事中的英雄,名字的意思是“先知”。回调地狱
好了,我就不讲那些学术化的东西了,直接进入正题,来个实际的例子比什么都强。
例如我们有3个 ajax 请求,需要按照顺序加载。$.get("/url1", function (data) { // 一些处理 $.get("/url2", function (data) { // 一些处理 $.get("/url3", function (data) { // 最终处理 }); });});
非常熟悉的画面,那如果请求增加到10个,甚至更多,会发生什么呢?
这幅图非常直观形象的展示了回调地狱。
时间支配 - 按顺序调度
为了避免回调地狱的发生,就需要 Promise 出马来合理的支配我们的任务时间。
首先需要学习下第一个 api,具体参阅 文档。 其实非常简单,就是用 Promise 包装下 ajax 请求即可,代码如下。// 用 Promise 包装 get 请求function myGet(url) { return new Promise(function(resolve, reject) { $.get(url, resolve); });}myGet('/url1').then(function (data) { // 一些处理,data为返回值 return myGet('/url2');}).then(function (data) { // 一些处理 return myGet('/url3');}).then(function (data) { // 最终处理});
这样就可以按顺序写 ajax 调用了,不会陷入无尽的回调之中。
如果你熟悉 jquery,那么你一定知道 Deferred,它实现了类似 Promise 的东西。$.get("/url1").then(function (data) { // 一些处理,data为返回值 return $.get("/url2");}).then(function (data) { // 一些处理 return $.get("/url3");}).then(function (data) { // 最终处理});
这样看着简洁多了,虽然 Deferred 和 Promise 实现方法不一样,但是他们的结果是一致的。
时间支配 - 异步并发
大家都知道 ajax 异步请求是没有返回顺序的,发了3个请求,有可能是1,2,3的返回,也有可能是3,1,2的返回顺序。
那我不想按顺序请求,而是并发请求,但是在最终所有请求完成后执行一段操作。 比如页面所有数据都加载完后隐藏 loading 层。这个时候,需要用到一个新方法 ,其实很简单,它接受一个 promise 数组最为参数。
function myGet(url) { return new Promise(function(resolve, reject) { $.get(url, resolve); });}var arr = [];arr.push(myGet('/url1'));arr.push(myGet('/url2'));arr.push(myGet('/url3'));Promise.all(arr).then(function (datas) { // 最终处理,datas 是所有返回结果的数组 console.log("返回数据为", datas);});
感觉比刚才的按顺序还要清爽,有木有。其实 jquery 也有类似的功能,而且用起来超爽的。
$.when($.get('/url1'), $.get('/url2'), $.get('/url3')).then(function (data1, data2, data3) { // 最终处理 console.log("返回数据为", data1, data2, data3);});
虽然形式有点怪异,不过调整下就OK了。
var arr = [];arr.push($.get('/url1'));arr.push($.get('/url2'));arr.push($.get('/url3'));$.when.apply(null, arr).then(function () { // 最终处理 console.log("返回数据为", arguments);});
利用 apply 来展开参数,代码看着舒服多了,跟上面的 Promise.all 是一样一样的。
结束语
本文本是我在一边学习测试一边写的,例子都跑过OK的,通篇下来后,对 Deferred 和 Promise 有了一定认识,
虽然并不一定透彻,至少比起以前好多了。为什么叫它为 时间支配者 呢,一开始没这样的想法,写到一半的时候发现确实可以合理的支配异步的时间调度问题。
异步操作最大的特点就是时间的不确定性,所以正常情况下很难流畅的书写简单而有逻辑性的代码。比如按顺序的异步,虽然可以合理的回调,但是会陷入回调地狱,再如并发异步呢?
并发异步,也许你要设置一个全局变量来记次,最后一个完成的,要触发下完成后的任务。 这样虽然也可以实现,但是代码会显的臃肿而又凌乱。但是有了 Promise 的帮助,这一切变的这么简单,自然。