promise中race和all的使用场景

Promise.race（）：

race的用法：谁跑的快，以谁为准执行回调。

race的使用场景：比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，代码如下：

 //请求某个图片资源
    function requestImg(){
        var p = new Promise((resolve, reject) => {
            var img = new Image();
            img.onload = function(){
                resolve(img);
            }
            img.src = '图片的路径';
        });
        return p;
    }
    //延时函数，用于给请求计时
    function timeout(){
        var p = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('图片请求超时');
            }, 5000);
        });
        return p;
    }
    Promise.race([requestImg(), timeout()]).then((data) =>{
        console.log(data);
    }).catch((err) => {
        console.log(err);
    });

我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。

Promise.all():

all的用法：谁跑的慢，以谁为准执行回调。

在前端的开发实践中，我们有时会遇到需要发送多个请求并根据请求顺序返回数据的需求，比如，我们要发送a、b、c三个请求，这三个请求返回的数据分别为a1、a2、a3，而我们想要a1、a2、a3按照我们希望的顺序返回。那么，使用Promise.all()方法可以完美的解决这一问题。


//模拟异步请求的函数
let request = (name, time) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let random = Math.random()
            if (random >= 0.2) {
                resolve(`${name}成功了`)
            } else {
                reject(`${name}失败了`)
            }
        }, time)    
    })
}

//构建三个Promise实例
let a = request('小明', 1000)
let b = request('小红', 500)
let c = request('小华', 1500)

//使用Promise.all(), 注意它接收的是一个数组作为参数 
Promise.all([b,a,c]).then(result => {
    console.log(result)
}).catch(result => {
    console.log(result)
})

如果三个请求都成功的话，那么这三个请求所返回的数据就是按照发送请求的顺序排列的，即['小红成功了', '小明成功了', '小华成功了']，而且还是以数组形式返回的；而当其中有请求失败了的话，就只会返回最先失败的结果。

当然，除了这个场景以外，Promise.all()方法还能用于其它地方。比如说，一个页面上有两个请求，只有拿到了这两个请求的数据，页面才会展示，在这之前会显示一个loading加载图。使用Promise.all()也是可以非常简洁的解决这个问题。