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的实例的状态是否改变都会执行回调函数