常用的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。
「两年博客,如果觉得我的文章对您有用,请帮助本站成长」
朋友 交换链接吗