ES6 - Note5:Promise

1.Promise介绍

Promise最早是社区提出和实现,后面ES6将其写入标准,并原生提供Promise对象,是一种异步编程的解决方案,具体的概念大家可以去查看相关的资料。传统上处理异步都是以callback回调函数的方式完成,但是当回调嵌套的太多,便会使程序很难理解,如下所示

function a(cb){
console.log('a...');
cb('a');
}
function b(cb){
console.log('b...');
cb('b');
}
function c(cb){
console.log('c...');
cb('c');
}
a(() => b( () => c( () => {}) ));
a...
b...
c...

如果后面还有基于C函数的输出结果的逻辑,回调将是很大的困恼。

而使用Promise来处理这种异步回调将会非常的直观,Promise以同步的操作完成异步的处理,如下所示

function a(){
console.log('a...');
return 'a output';
}
function b(res){
console.log('b...');
console.log('get A:'+res);
return "b output";
}
function c(res){
console.log('c...');
console.log('get B:'+res);
}
new Promise((resolve,reject) => {setTimeout(resolve,1000)}).then(a).then(b).then(c);
Promise { <state>: "pending" }
a...
b...
get A:a output
c...
get B:b output

2.Promise的用法

Promise是一个构造函数,接收一个函数参数,该函数接收两个函数作为参数,分别是resolve,reject。这两个函数由Promise自己提供,无需自己部署。resolve函数将Promise的状态从'Pending'转为'Resolved',reject函数将状态从'Pending'转为'rejected'。

基本语法,如下所示

new Promise((resolve,reject) => {
if(success){ //异步处理成功
resolve();
}else{
reject();
}
}).then(onFulfilled,onRejected);

创建一个Promise实例,如下所示

var promise = new Promise((resolve,reject) => {console.log('hehe');resolve('resolved')});
promise.then((val) => console.log(val))
console.log('current');
hehe
current
resolved

resolve函数与reject函数调用时可以传递参数,一般给reject函数传递Error的实例,用于指出抛出的错误,传给reject函数的参数可以是一般的数值,也可以是Promise的实例,这时该Promise的实例状态由参数Promise实例的状态决定,如下所示

var p1 = new Promise((resolve,reject) => {
setTimeout(()=>{console.log('1秒后的 p1');resolve(p2);},1000);
});
var p2 = new Promise((resolve,reject)=>{
setTimeout(()=>{console.log('2秒后的 p2');resolve('p2');},2000);
}); p1.then((val)=>console.log(val));
Promise { <state>: "pending" }
1秒后的 p1
2秒后的 p2
p2

如上所示,Promise是创建就立即执行,且then方法的回调函数将在当前脚本所有同步语句执行完执行,但是比定时器的队列优先级要高,如下所示

setTimeout(()=>console.log('settimeouting...'),0);
var promise = new Promise((resolve,reject) => {
console.log('promise constructing...');
reject(new Error('error'));
});
promise.then(null,(reason)=>console.log(reason));
promise constructing...
Promise { <state>: "pending" }
Error: error
堆栈跟踪:
promise<@debugger eval code:4:9
@debugger eval code:2:15 settimeouting...

Promise的原型方法then,该方法为promise实例添加状态改变时的回调函数,第一个参数是状态为resolved时的回调,第二个参数是状态为rejected的回调。如下所示

var p3 = new Promise((resolve,reject) => {
console.log('p3');
resolve('p3');
});
var p4 = new Promise((resolve,reject) => {
console.log('p4');
setTimeout(()=>resolve('p4'),1500);
});
p3.then(()=>p4).then((result) => console.log(result));//这里需要注意一点,如果then方法返回一个Promise实例,则下一个then回调需要等待该Promise实例的状态改变才会执行。
p3
p4
Promise { <state>: "pending" }
p4

Promise内部抛出的错误不会被捕获(Chrome浏览器除外),除非使用catch方法,如果在resolve之前抛出,则resolve不会执行,相反则相当于没有抛出错误,如下所示

var promise = new Promise((resolve,reject) => {
console.log('promise constructing...');
throw new Error('error');
resolve('haha');
});
promise.then((val)=>console.log(val));
promise constructing...
-------------------------------------------------------------
var promise = new Promise((resolve,reject) => {
console.log('promise constructing...');
resolve('haha');
throw new Error('error'); });
promise.then((val)=>console.log(val));
promise constructing...
haha

使用Promise的原型方法catch捕获错误,该方法其实是.then(null,reject)的别名,如下所示

var promise = new Promise((resolve,reject) => {
console.log('promise constructing...');
throw new Error('error');
resolve('haha');
});
promise.then((val)=>console.log(val)).catch((error)=>console.log(error)); promise constructing...
Promise { <state>: "pending" }
Error: error
堆栈跟踪:
promise<@debugger eval code:3:8
@debugger eval code:1:19

Promise的错误捕获可以使用then方法的第二个参数指定reject的回调函数,也可以使用Promise.prototype.catch方法捕获,但是一般推荐使用方法二,因为catch不仅能捕获到promise内部抛出的错误,then方法中的错误也能被捕获。但是在调用resolve方法之后,再抛出错误,不会被捕获,相当于没有抛出错误,如下所示

var promise = new Promise((resolve,reject) => {
throw new Error('promise error');
});
promise.then(null,(err)=>console.log(err));
Promise { <state>: "pending" }
Error: promise error
堆栈跟踪:
promise<@debugger eval code:2:9
@debugger eval code:1:19
---------------------------catch method-------------------
var promise = new Promise((resolve,reject) => {
reject(new Error('promise error'));
});
promise.catch((error)=>console.log(error));
Promise { <state>: "pending" }
Error: promise error
堆栈跟踪:
promise<@debugger eval code:2:9
@debugger eval code:1:19
---------------------------then方法中报错-------------------
var p5 = new Promise((resolve,reject) => {
resolve('hehe');
});
p5.then((val)=>val+x).catch((err)=>console.log(err));
Promise { <state>: "pending" }
ReferenceError: x is not defined
堆栈跟踪:
@debugger eval code:4:16

catch方法也是返回一个Promise,因此在catch后面还可以接着使用链式方法then,但这时then方法报错将不会被前面的catch捕获,如下所示

var p5 = new Promise((resolve,reject) => {
resolve('hehe');
});
p5.then((val)=>val+x).catch((err)=>console.log(err)).then((val)=>y+3);
Promise { <state>: "pending" }
ReferenceError: x is not defined
堆栈跟踪:
@debugger eval code:4:16

3.Promise.all

Promise.all方法可以将多个Promise实例[p1,p2,p3...]包装成一个Promise对象A,A的状态由p1,p2,p3...决定:如果p1,p2,p3...的状态都变为onfulfilled,A的状态才变为onfulfilled,且p1,p2,p3...的异步操作结果组成一个数组传给回调函数;但凡p1,p2,p3...中有一个状态变为了rejected,A的状态立即变为rejected,且第一个rejected的返回值会传给回调函数,如下所示

var p1 = new Promise((resolve,reject) => {
console.log('p1...');
setTimeout(()=>resolve('p1 resolved...'),1000);
});
var p2 = new Promise((resolve,reject) => {
console.log('p2...');
setTimeout(()=>resolve('p2 resolved...'),2000);
});
var p3 = new Promise((resolve,reject) => {
console.log('p3...');
setTimeout(()=>resolve('p3 resolved...'),3000);
}); Promise.all([p1,p2,p3]).then((args)=>{console.log('3S后的输出:');for(let v of args){console.log(v);}});
p1...
p2...
p3...
3S后的输出:
p1 resolved...
p2 resolved...
p3 resolved...
------------------------ 有一个Promise实例变为rejected ---------------
var p1 = new Promise((resolve,reject) => {
console.log('p1...');
setTimeout(()=>resolve('p1 resolved...'),1000);
});
var p2 = new Promise((resolve,reject) => {
console.log('p2...');
setTimeout(()=>resolve('p2 resolved...'),2000);
});
var p3 = new Promise((resolve,reject) => {
console.log('p3...');
setTimeout(()=>resolve('p3 resolved...'),3000);
});
var p4 = new Promise((resolve,reject) => {
console.log('p4...');
reject("p4 rejected...");
});
Promise.all([p1,p2,p3,p4]).then((args)=>console.log(args),(reason) => console.log(reason));
p1...
p2...
p3...
p4...
Promise { <state>: "pending" }
p4 rejected...

4.Promise.race

同Promise.all一样,该方法也是将多个Promise实例[p1,p2,p3...]包装成一个新的Promise实例B。"race"的字面意思就是竞争,所以[p1,p2,p3...]谁的状态先改变,B的状态立即改变一样的状态且第一个改变状态的promise实例的返回值传递给回调函数,如下所示

var p1 = new Promise((resolve,reject) => {
console.log('p1...');
setTimeout(()=>resolve('p1 resolved...'),1000);
});
var p2 = new Promise((resolve,reject) => {
console.log('p2...');
setTimeout(()=>resolve('p2 resolved...'),2000);
});
var p3 = new Promise((resolve,reject) => {
console.log('p3...');
setTimeout(()=>resolve('p3 resolved...'),3000);
}); Promise.race([p1,p2,p3]).then((val)=>console.log(val),(reason)=>console.log(reason)); p1...
p2...
p3...
Promise { <state>: "pending" }
p1 resolved...

5.Promise.resolve与Promise.reject

Promise.resolve是将给定的参数转换成一个Promise对象,如下所示

Promise.resolve(arg);//等同于new Promise((resolve)=>resolve(arg))
omise.resolve('resolve convert...').then((val)=>console.log(val));
Promise { <state>: "pending" }
resolve convert...

根据给定的参数类型不同,Promise.resolve有不同的动作:

A、参数为Promise实例,则直接返回该实例

B、参数为空,执行返回一个resolved状态的新Promise实例

C、参数为普通的数值或对象,则直接返回一个resolved状态的新Promise实例,如下所示

Promise.resolve({x:1}).then((val)=>console.log(val));
Promise { <state>: "pending" }
Object { x: 1 }

D、参数为thenable对象,既对象实现了then方法,此时返回一个新Promise实例并立即执行对象then方法,如下所示

var thenableObj = {
then(resolve,reject){
reject('test...');
}
};
Promise.resolve(thenableObj).then(null,(reason)=>console.log(reason)); Promise { <state>: "pending" }
test...

Promise.reject与Promise.resolve的用法一致,只是返回的Promise实例的状态为rejected,如下所示

Promise.reject('reject convert...').then(null,(reason) => console.log(reason));
Promise { <state>: "pending" }
reject convert...

6.给原生Promise对象扩展方法,如下所示

//一下两个函数来自raunyifeng博客
Promise.prototype.done = function (onFulfilled, onRejected) {
this.then(onFulfilled, onRejected)
.catch(function (reason) {
setTimeout(() => { throw reason }, 0);
});
};
该方法只要执行就可以捕获前面调用链中的错误
Promise.prototype.finally = function (callback) {
let P = this.constructor;
return this.then(
value => P.resolve(callback()).then(() => value),
reason => P.resolve(callback()).then(() => { throw reason })
);
};
该方法不管Promise的实例的状态是否改变都会执行回调函数
上一篇:QBC检索和本地SQL检索


下一篇:redis持久化(摘录)