让你彻底掌握es6 Promise的八段代码(2)

根据以上分析,代码中第一个then会返回一个值为2(1*2),状态为resolved的Promise对象,于是第二个then输出的值是2。第二个then中没有返回值,因此将返回默认的undefined,于是在第三个then中输出undefined。第三个then和第四个then中分别返回一个状态是resolved的Promise和一个状态是rejected的Promise,依次由第四个then中成功的回调函数和第五个then中失败的回调函数处理。

5.Promise then() 回调异步性

var p = new Promise(function(resolve, reject){ resolve("success"); }); p.then(function(value){ console.log(value); }); console.log("which one is called first ?");

控制台输出:

"which one is called first ?" "success"

Promise接收的函数参数是同步执行的,但then方法中的回调函数执行则是异步的,因此,"success"会在后面输出。

6.Promise 中的异常

var p1 = new Promise( function(resolve,reject){ foo.bar(); resolve( 1 ); }); p1.then( function(value){ console.log('p1 then value: ' + value); }, function(err){ console.log('p1 then err: ' + err); } ).then( function(value){ console.log('p1 then then value: '+value); }, function(err){ console.log('p1 then then err: ' + err); } ); var p2 = new Promise(function(resolve,reject){ resolve( 2 ); }); p2.then( function(value){ console.log('p2 then value: ' + value); foo.bar(); }, function(err){ console.log('p2 then err: ' + err); } ).then( function(value){ console.log('p2 then then value: ' + value); }, function(err){ console.log('p2 then then err: ' + err); return 1; } ).then( function(value){ console.log('p2 then then then value: ' + value); }, function(err){ console.log('p2 then then then err: ' + err); } );

控制台输出:

p1 then err: ReferenceError: foo is not defined p2 then value: 2 p1 then then value: undefined p2 then then err: ReferenceError: foo is not defined p2 then then then value: 1

Promise中的异常由then参数中第二个回调函数(Promise执行失败的回调)处理,异常信息将作为Promise的值。异常一旦得到处理,then返回的后续Promise对象将恢复正常,并会被Promise执行成功的回调函数处理。另外,需要注意p1、p2 多级then的回调函数是交替执行的 ,这正是由Promise then回调的异步性决定的。

7.Promise.resolve()

var p1 = Promise.resolve( 1 ); var p2 = Promise.resolve( p1 ); var p3 = new Promise(function(resolve, reject){ resolve(1); }); var p4 = new Promise(function(resolve, reject){ resolve(p1); }); console.log(p1 === p2); console.log(p1 === p3); console.log(p1 === p4); console.log(p3 === p4); p4.then(function(value){ console.log('p4=' + value); }); p2.then(function(value){ console.log('p2=' + value); }) p1.then(function(value){ console.log('p1=' + value); })

控制台输出:

true false false false p2=1 p1=1 p4=1

Promise.resolve(...)可以接收一个值或者是一个Promise对象作为参数。当参数是普通值时,它返回一个resolved状态的Promise对象,对象的值就是这个参数;当参数是一个Promise对象时,它直接返回这个Promise参数。因此,p1 === p2。但通过new的方式创建的Promise对象都是一个新的对象,因此后面的三个比较结果都是false。另外,为什么p4的then最先调用,但在控制台上是最后输出结果的呢?因为p4的resolve中接收的参数是一个Promise对象p1,resolve会对p1”拆箱“,获取p1的状态和值,但这个过程是异步的,可参考下一节。

8.resolve vs reject

var p1 = new Promise(function(resolve, reject){ resolve(Promise.resolve('resolve')); }); var p2 = new Promise(function(resolve, reject){ resolve(Promise.reject('reject')); }); var p3 = new Promise(function(resolve, reject){ reject(Promise.resolve('resolve')); }); p1.then( function fulfilled(value){ console.log('fulfilled: ' + value); }, function rejected(err){ console.log('rejected: ' + err); } ); p2.then( function fulfilled(value){ console.log('fulfilled: ' + value); }, function rejected(err){ console.log('rejected: ' + err); } ); p3.then( function fulfilled(value){ console.log('fulfilled: ' + value); }, function rejected(err){ console.log('rejected: ' + err); } );

控制台输出:

p3 rejected: [object Promise] p1 fulfilled: resolve p2 rejected: reject

Promise回调函数中的第一个参数resolve,会对Promise执行"拆箱"动作。即当resolve的参数是一个Promise对象时,resolve会"拆箱"获取这个Promise对象的状态和值,但这个过程是异步的。p1"拆箱"后,获取到Promise对象的状态是resolved,因此fulfilled回调被执行;p2"拆箱"后,获取到Promise对象的状态是rejected,因此rejected回调被执行。但Promise回调函数中的第二个参数reject不具备”拆箱“的能力,reject的参数会直接传递给then方法中的rejected回调。因此,即使p3 reject接收了一个resolved状态的Promise,then方法中被调用的依然是rejected,并且参数就是reject接收到的Promise对象。

总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyjgyj.html