ES6 - Promise基础用法(all、race)详解二

·  阅读 1873

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

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中,会打印出错误信息请求超时

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改