ES6 - Promise基础用法（all、race）详解二

接上一篇，我们说完了reject、resolve、then、catch，下面我来说下Promise的其他两个方法all、race。

Promise.all()

简单来说，all的作用就是并行执行多个异步操作，然后在最后一个异步程序结束后，再继续下面的方法。

Promise // 用Promise.all来执行，all接收一个数组参数，里面的值最终都算返回Promise对象。
    .all([runAsync1(), runAsync2(), runAsync3()])
    .then(function(data) {
        console.log(data); // [1, 2, 3]
    });
复制代码

runAsync1(), runAsync2(), runAsync3()是我们上一个文章中写过的方法，如果不清楚的可以去这个地址看一下： mp.csdn.net/postedit/85…

根据上面的代码我们可以看到，当三个异步程序都执行完成后，在then方法中一次返回一个data数组，是三个异步程序的返回值组成的集合。

方法很简单，那这个方法在现实中，有哪些实用的地方呢？

打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。 所有的都加载完后，我们再进行页面的初始化

下面我们来看一个跟all相似，但是运行过程不同的方法race。

Promise.race()

all方法的效果实际上是「谁跑的慢，以谁为准执行回调」， 那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是race方法

race 的用法：

Promise
   .race([runAsync1(), runAsync2(), runAsync3()])
   .then(function(data){
        console.log(data); // 1
    })
复制代码

因为第一个方法先结束，所以程序就到在此运行到then方法， 返回的 1

现实中 race 的使用也很多

可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作

/*---------- race 使用场景 ----------------*/

    // 请求某个图片资源

    function requestImg() {
        var p = new Promise(function(resolve, reject) {
            var img =  new Image();
            img.src = 'http://www.google.cn/landing/cnexp/google-search.png';
            img.onload = function() {
                resolve(img)
            }
        });
        return p;
    }

    // 延时函数，用于给请求记时
    function timeout() {
        var p = new Promise(function(resolve, reject) {
            setTimeout(function() {
                reject('请求超时')
            }, 5000)
        });
        return p;
    }

    Promise
        .race([requestImg(), timeout()])
        .then(function(data) {
            console.log(data);
            document.body.appendChild(data);
        })
        .catch(function(reason) {
            console.log(reason);
        })
复制代码

如果你把图片的url地址替换成一个不存在的地址，那么系统会报404的错误，在接下来的catch中，会打印出错误信息请求超时