关注前端 | 前端博客
当前位置: JavaScript > promise用例

promise用例

2018-09-28 分类:JavaScript 作者:管理员 阅读(540)

常用的promise用例

promise用例场景1:给某个异步请求设置超时时间,并且在超时后执行相应的操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
           resolve(img);
        }
        img.src = "http://moxiaofei.com/wp-content/uploads/2018/04/javascript.png";
    });
    return p;
}

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

Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

上面代码 requestImg 函数异步请求一张图片,timeout 函数是一个延时 5 秒的异步操作。我们将它们一起放在 race 中赛跑。
如果 5 秒内图片请求成功那么便进入 then 方法,执行正常的流程。
如果 5 秒钟图片还未成功返回,那么则进入 catch,报“图片请求超时”的信息。

race 只要有一个异步操作执行完毕,就立刻执行 then 回调。
注意:其它没有执行完毕的异步操作仍然会继续执行,而不是停止。

promise用例场景2:并行执行异步操作,并且在所有异步操作执行完后才执行回调
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//切菜
function cutUp(){
    console.log('开始切菜。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('切菜完毕!');
            resolve('切好的菜');
        }, 1000);
    });
    return p;
}
 
//烧水
function boil(){
    console.log('开始烧水。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('烧水完毕!');
            resolve('烧好的水');
        }, 1000);
    });
    return p;
}
 
Promise
.all([cutUp(), boil()])
.then(function(results){
    console.log("准备工作完毕:");
    console.log(results);
});

两个异步操作是并行执行的,等到它们都执行完后才会进到 then 里面。同时 all 会把所有异步操作的结果放进一个数组中传给 then。

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(3) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
3

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 1 条评论 - promise用例

  1. RAKsmart优惠码 Windows NT Chrome 63.0.3239.132

    朋友 交换链接吗

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线