Promise的几个方法

wade

发布于 2020-04-24 17:09:00

3200

发布于 2020-04-24 17:09:00

文章被收录于专栏：coding个人笔记

我们知道了Promise链接调用，只要返回一个Promise对象就能一直链接调用，但是如果是这样写：

new Promise(function(resolve, reject){
    resolve('star');
}).then(function(data){
    console.log('two: ', data);
    return new Promise(function(resolve, reject){
        resolve('two result');
    });
}).then(function(data){
    console.log('three: ', data);
    return new Promise(function(resolve, reject){
        resolve('three result');
    });
}).then(function(data){
    console.log('end result: ', data);
}).catch(function(err){
    console.log('err: ', err);
});

我们都会觉得虽然是链式调用，对比回调会清晰一点，但是并没有想象中的那么美好。所以Promise提供了几个方法。

Promise.resolve：

返回一个由参数决定的Promise对象，简单来说就是返回一个Promise对象，且是成功的时候调用该方法，会将信息传递给下一个then方法。

Promise.reject：

返回一个状态为失败的Promise对象，并将失败信息传递给对应的catch方法。

有了这两个方法，那么我们就能想上面的链式调用简写：

new Promise(function(resolve, reject){
    //do something
    resolve('star');
}).then(function(data){
    //do something
    console.log('two: ', data);
    return Promise.resolve('two result');
}).then(function(data){
    //do something
    console.log('three: ', data);
    return Promise.resolve('three result');
}).then(function(data){
    //do something
    console.log('end result: ', data);
}).catch(function(err){
    console.log('err: ', err);
});

成功就调用resolve，失败就调用reject，在这之前你可以进行一系列逻辑处理，只要把最好的结果通过return Promise就可以，这样就很简洁很清晰。

Promise.all：

上面都是写在一起的链式调用，Promise还有一个all方法，可以把封装好的Promise方法进行链式调用。

var promise1 = new Promise(function(resolve, reject) {
    resolve(1);
});
var promise2 = new Promise(function(resolve, reject) {
    resolve(2);
});
var promise3 = new Promise(function(resolve, reject) {
    resolve(3);
});
Promise.all([promise1, promise2, promise3]).then(function(values) {
    console.log(values);//[1, 2, 3]
}).catch(function(values) {
    console.log(values);
});

Promise.all方法必须是所有的对象都是调用成功的resolve方法，否则会走catch方法。然后得到的结果会按顺序输出一个数组。如果参数不是Promise对象，这些值会被忽略，但是结果放入数组。在对于页面一些必须所有数据得到才渲染的场景下，all方法非常有用。

Promise.race：

第一个执行完毕的结果，无论结果是成功还是失败。

var promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one');
});
var promise2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 550, 'two');
});
Promise.race([promise1, promise2]).then(function(value) {
    console.log(value);
});

不管是成功还是失败，只要是第一个执行完毕就会执行race方法。

上面的方法运行的时候记得修改resolve成reject，看看结果。

说真的，Promise在一些场景下非常有用，对于想要封装方法封装库也非常有用，或许开发业务过程中我们用的很少，但是对于Promise方法我还是觉得应该知道了解，在遇见一些能够使用的时候快速实现。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-11-15，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript