promise用例

2018-09-28 分类：JavaScript 作者：管理员阅读（2860）

常用的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。

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

赞(4) 打赏