温故而知新，可以为师矣
ES6 Promise 用法讲解
Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。
resolve参数（可以理解合格的内容）
1
2
3
4
5
6
7
8
9
10
11
12
13
| <script>
var p = new Promise(function(resolve,reject){
setTimeout(() => {
console.log('执行完成');
resolve("合格的内容")
},2000)
})
</script>
先打印出了Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: "合格的内容"
再过2秒，打印出了'执行完成'
|
使用.then就可以获取resovle中的内容啦
1
2
3
4
5
6
7
8
9
10
11
12
| <script>
var p = new Promise(function(resolve,reject){
setTimeout(() => {
console.log('执行完成');
resolve("合格的内容")
},2000)
})
p.then( (val) => {
console.log(val)
})
</script>
2秒钟后就相继输出了 "执行完成" "合格的内容"
|
resolve参数（可以理解不合格的内容）可以使用.catch获取它的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| function getNumber(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
var num = Math.ceil(Math.random()*10);
if(num<=5){
resolve(num);
}
else{
reject('数字太大了');
}
}, 2000);
});
return p;
}
getNumber().then( val => {
console.log(val)
}).catch( val => {
console.log(val)
})
如何满足if条件，就输出相应数字，否则输出 reject中的'数字太大了'
|
all的用法
方法都调用完成再输出resolve中的内容
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
31
32
33
34
35
36
37
| function runAsync1(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
console.log('异步任务1执行完成');
resolve('随便什么数据1');
}, 1000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
console.log('异步任务2执行完成');
resolve('随便什么数据2');
}, 2000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
console.log('异步任务3执行完成');
resolve('随便什么数据3');
}, 300);
});
return p;
}
Promise
.all([runAsync1(),runAsync2(),runAsync3()])
.then(function(results){
console.log(results);
});
|
race的用法
异步执行最快的函数以后，直接输出内容，再按照执行速度依次执行
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
31
32
33
34
35
36
| function runAsync1(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
console.log('异步任务1执行完成');
resolve('随便什么数据1');
}, 3000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
console.log('异步任务2执行完成');
resolve('随便什么数据2');
}, 3000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
console.log('异步任务3执行完成');
resolve('随便什么数据3');
}, 1000);
});
return p;
}
Promise
.race([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);
});
|