ES6-Promise对象 (下)

ES6-Promise对象 (上)

1.Promise对象方法

(1)Promise.all(iterable);

Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
参数:一个可迭代对象,例如一个Array
像这样:

var p = Promise.all([p1, p2, p3]);

p的状态由p1、p2、p3决定,分成两种情况。
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

let p1 = Promise.resolve(3);
let p2 = 1337;
let p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, "foo");
}); 

Promise.all([p1, p2, p3]).then(values => { 
    console.log(values); 
    // [3, 1337, "foo"] 
});
  • 如果iterable包含非promise值,则它们将被忽略,但仍然计入返回的promise数组值(如果promise已满足):
var p1 = Promise.all([1,2,3]);
var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
var p3 = Promise.all([1,2,3, Promise.reject(555)]);

//setTimeout运行机制,等到当前脚本的同步任务和“任务队列”中已有的事件,全部处理完以后,执行setTimeout指定的任务。
setTimeout(function(){
    console.log(p1);
    console.log(p2);
    console.log(p3);
});

//结果:
//[Log] Promise {status: "resolved", result: [1, 2, 3]}
//[Log] Promise {status: "resolved", result: [1, 2, 3, 444]} 
//[Log] Promise {status: "rejected", result: 555} 
  • Promise.all的异步性和同步性

如果参数不为空(异步)

var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
var p = Promise.all(resolvedPromisesArray);
console.log(p);

setTimeout(function(){
    console.log('the stack is now empty');
    console.log(p);
});

// 结果:
// Promise { <state>: "pending" } 
// the stack is now empty
// Promise { <state>: "fulfilled", <value>: Array[2] }

如果参数为空(同步)

var p=Promise.all([]);
console.log(p);   //Promise {status: "resolved", result: []}
  • Promise.all 一旦reject立即返回
var p1 = new Promise((resolve, reject) => { 
  setTimeout(resolve, 1000, 'one'); 
}); 
var p2 = new Promise((resolve, reject) => { 
  setTimeout(resolve, 2000, 'two'); 
});

var p3 = new Promise((resolve, reject) => {
  reject('reject');
});

Promise.all([p1, p2, p3).then(values => { 
  console.log(values);
}, reason => {
  console.log(reason)
});

//From console:
//"reject"
  • 如果作为参数的 Promise 实例是catch()后产生的,返回的还是resolved状态的Promise,这个我们参照then方法的返回值,因为catch()也是then方法的特例
var p1 = new Promise((resolve, reject) => {
  resolve('我是对的');
})
.then(result => result)  
.catch(e => e);

var  p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result)
.catch(e => e);    //本质上返回的还是resolved状态的Promise

Promise.all([p1, p2])
.then(result => console.log(result))   //执行这个
.catch(e => console.log(e));

结果:
["我是对的", Error: 报错了] (2)

到这里,我们终于讲完了all()方法,我们趁热打铁,写一个同步请求数据,异步处理的例子

// 请求1
function  rq1 () {
    var promise = new Promise(function(resolve,reject){
        $.ajax({
            url:"XXX",
            type:"POST",
            data:{
                id:'20151002262'
            },
            success:function(msg){
                resolve(msg)
            }
        })
    })  
    return promise;
}
// 请求2
function  rq2 () {
    var promise = new Promise(function(resolve,reject){
        $.ajax({
            url:"XXX",
            type:"POST",
            data:{
                score:'666'
            },
            success:function(msg){
                resolve(msg)
            }
        })
    })  
    return promise;
}

Promise.all([rq1(),rq2 () ])
.then(function(res){
    console.log(res);
})

(2)Promise.race(iterable);

Promise.race方法同样是将多个Promise实例,包装成一个新的Promise实例。

var p = Promise.race([p1, p2, p3]);

不同的是,只要p1, p2, p3中任意一个实例率先改变状态,则p的状态就跟着改变,而且状态由率先改变的实例决定。

描述:
race 函数返回一个 Promise,它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成( resolves),也可以是失败(rejects),采用第一个promise的值作为它的值,从而异步地解析或拒绝(一旦堆栈为空)。

如果传的迭代是空的,则返回的 promise 将永远等待。

  • Promise.race的异步性
var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
var p = Promise.race(resolvedPromisesArray);
console.log(p);

setTimeout(function(){
    console.log('the stack is now empty');
    console.log(p);
});

//结果
//[Log] Promise {status: "pending"} 
//[Log] the stack is now empty 
//[Log] Promise {status: "resolved", result: 33} 

(3)Promise.resolve()

Promise.resolve(value)方法返回一个以给定值解析后的Promise对象。但如果这个值是个thenable(即带有then方法),返回的promise会“跟随”这个thenable的对象,采用它的最终状态(指resolved/rejected/pending/settled);否则以该值为成功状态返回promise对象。

  • 语法

Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable)

  • 对一个普通值进行resolve,Promise.resolve方法返回一个新的Promise对象,状态为resolve。
Promise.resolve("Success").then(function(value) {
  console.log(value); // "Success"
}, function(value) {
  // 不会被调用
});
  • Resolve另一个promise对象,参数是一个Promise实例,那么Promise.resolve将不做任何处理,直接返回这个实例。
var original = Promise.resolve("patty");
var cast = Promise.resolve(original);
cast.then(function(v) {
  console.log(v); // true
});
  • resolve thenable的对象们,参数是一个thenable对象,也就是说对象是具有then方法的对象
// 1.Resolve一个thenable对象
var p1 = Promise.resolve({ 
  then: function(onFulfill, onReject) { onFulfill("fulfilled!"); }
});
console.log(p1 instanceof Promise) // true, 这是一个Promise对象

p1.then(function(v) {
    console.log(v); // 输出"fulfilled!"
  }, function(e) {
    // 不会被调用
});

// 2.Thenable在callback之前抛出异常
// Promise rejects
var thenable = { then: function(resolve) {
  throw new TypeError("Throwing");
  resolve("Resolving");
}};

var p2 = Promise.resolve(thenable);
p2.then(function(v) {
  // 不会被调用
}, function(e) {
  console.log(e); // TypeError: Throwing
});

// 3.Thenable在callback之后抛出异常
// Promise resolves
var thenable = { then: function(resolve) {
  resolve("Resolving");
  throw new TypeError("Throwing");
}};

var p3 = Promise.resolve(thenable);
p3.then(function(v) {
  console.log(v); // 输出"Resolving"
}, function(e) {
  // 不会被调用
});
(4)Promise.reject()

Promise.reject(reason)方法返回一个用reason拒绝的Promise。reason如果是Promise,依然作为回调函数参数返回。
语法

Promise.reject(reason);
静态函数Promise.reject返回一个被拒绝的Promise。使用是Error实例的reason对调试和选择性错误捕捉很有帮助。

Promise.reject("Testing static reject").then(function(reason) {
  // 未被调用
}, function(reason) {
  console.log(reason); // "测试静态拒绝"
});

Promise.reject(new Error("fail")).then(function(error) {
  // 未被调用
}, function(error) {
  console.log(error); // 堆栈跟踪
});

2.Promise对象的两个实用方法

下面将要实现的两种方法在ES6中并未标准化,但是实现并不是很难

(1)Promise.prototype.done(onFulfilled, onRejected)

上一次讲到Promise对象的回调链,不管以then方法或者catch方法结尾,要是最后一个方法抛出错误,都有可能无法捕捉到,因为Promise内部的错误不会冒泡到全局,因此,我们可以提供一个done方法,总是处理回调链的尾端,保证抛出任何可能出现的错误。
我们一起来看看done()的实现

Promise.prototype.done = function (resolve, reject) {
    this.then(resolve, reject)
        .catch( function (reason) {
            // 抛出一个全局错误
            setTimeout( () => { throw reason }, 0);
        });
}

// 使用示例
var p = new Promise( (resolve, reject) => {
    resolve('p');
});
p.then(ret => {
    console.log(ret);
    return 'then1';
}).catch( err => {
    console.log(err.toString());
}).then( ret => {
    console.log(ret);
    return 'then2';
}).then( ret => {
    console.log(ret);
    x + 2;
}).done();

运行结果:


res.png

这是Promise官方API实现的done()


done.png
(2)Promise.prototype.finally(onResolved)

finally方法用于指定不管Promise对象最后的状态如何,都会执行的操作,它与done方法最大的区别就是,它接受一个普通函数作为参数,该函数不管怎么样都必须执行。

Promise.prototype.finally = function (callback) {
    let P = this.constructor;
    return this.then(
        ret => P.resolve(callback()).then( () => ret),
        err => P.resolve(callback()).then( () => {throw reason })
    );
};

到这里,Promise的方法终于讲完了!!!


3.Promise的优劣势

从上面几个小节综合来看,可以看到Promise其实就是做了一件事情,那就是对异步操作进行了封装,然后可以将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数,同时提供统一的接口,使得控制异步操作更加容易。

但是,Promise也有一些缺点:

  • 无法取消Promise,一旦新建它就会立即执行,无法中途取消。
  • 如果不设置回调函数,Promise内部的错误不会反应到外部。
  • 当处于未完成态时,无法得知目前进展到哪一个阶段。

4. Promise与generator的结合

Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。使用Generator函数来管理流程,遇到异步操作的时候,通常返回一个Promise对象。

参考资料:
Promise
ECMAScript 6 入门
JavaScript Promise迷你书

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容

  • Promise的含义:   Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和...
    呼呼哥阅读 2,167评论 0 16
  • Promiese 简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,语法上说,Pr...
    雨飞飞雨阅读 3,352评论 0 19
  • 00、前言Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区...
    夜幕小草阅读 2,129评论 0 12
  • 你不知道JS:异步 第三章:Promises 在第二章,我们指出了采用回调来表达异步和管理并发时的两种主要不足:缺...
    purple_force阅读 2,058评论 0 4
  • 1.持续集成的优点 (1)解放劳动力; (2)避免人为失误; (3)提高效率; (4)质量持续反馈(每小时/每日构...
    abc123it阅读 245评论 1 2