Promise异步编程

Promise的使用

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script>
// 参数 -> 函数(resolve, reject)
// resolve, reject本身它们又是函数
// 链式编程
new Promise((resolve, reject) => {

// 第一次网路请求的代码
setTimeout(() => {
resolve()
}, 2000)
}).then(() => {
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');

return new Promise((resolve, reject) => {

// 第二次网络请求的代码
setTimeout(() => {
resolve()
}, 1000)
})
}).then(() => {
// 第二次处理的代码
console.log('Hello Vue.js');
console.log('Hello Vue.js');
console.log('Hello Vue.js');
console.log('Hello Vue.js');
console.log('Hello Vue.js');

return new Promise((resolve, reject) => {

// 第三次网络请求的代码
setTimeout(() => {
resolve()
}, 1000)
})
}).then(() => {
// 第三次处理的代码
console.log('Hello css');
console.log('Hello css');
console.log('Hello css');
console.log('Hello css');
console.log('Hello css');
})

new Promise((resolve, reject) => {
setTimeout(() => {
// 成功的时候
resolve('异步传数据')

// 失败的时候
// reject('error message')
}, 5000)
// .then((data) => 只有一个参数,data括号可以省略
}).then((data) => {
console.log('成功反馈');
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
}).catch(err => {
// 捕获错误信息
console.log('错误信息');
console.log(err);
console.log(err);
console.log(err);
console.log(err);
console.log(err);
})
</script>

什么情况下用到Promise?
一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
new -> 构造函数(1.保存了一些状态信息 2.执行传入的函数)
在执行传入的回调函数时,会传入两个参数,resolve,reject,本身又是函数

Promise的另种处理形式

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
// then(函数一:成功, 函数二:失败)
new Promise((resolve, reject) => {
setTimeout(() => {
// resolve('Hello Vue.js')
reject('error message')
}, 1000)
}).then(data => {
console.log(data);
}, err => {
console.log(err);
})
</script>

Promise的链式调用

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script>
// wrapped into 内部包装
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('aaa')
}, 1000)
}).then(res => {
// 1.自己处理10行代码
console.log(res, '第一层的10行处理代码');

// 2.对结果进行第一次处理
return new Promise((resolve) => {
resolve(res + '111')
})
}).then(res => {
console.log(res, '第二层的10行处理代码');

return new Promise(resolve => {
resolve(res + '222')
})
}).then(res => {
console.log(res, '第三层的10行处理代码')
})

//简写
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('aaa')
}, 1000)
}).then(res => {
// 1.自己处理10行代码
console.log(res, '第一层的10行处理代码');

// 2.对结果进行第一次处理
// 捕获失败信息
return Promise.reject('error')
//手动抛出异常
throw 'error message'

return Promise.resolve(res + '111')
}).then(res => {
console.log(res, '第二层的10行处理代码');

return Promise.resolve(res + '222')
}).then(res => {
console.log(res, '第三层的10行处理代码')
}).catch(err => {
console.log(err);
})

// 省略Promise.resolve
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('aaa')
}, 1000)
}).then(res => {
// 1.自己处理10行代码
console.log(res, '第一层的10行处理代码');

// 2.对结果进行第一次处理
return res + '111'
}).then(res => {
console.log(res, '第二层的10行处理代码');

return res + '222'
}).then(res => {
console.log(res, '第三层的10行处理代码')
})
</script>

Promise的all方法使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
Promise.all([
new Promise((resolve, reject) => {
setTimeout(() => {
// resolve('result1')
resolve({name: 'why', age: 18})
}, 2000)
}),
new Promise((resolve, reject) => {
setTimeout(() => {
// resolve('result2')
resolve({name: 'blue', age: 19})
}, 1000)
})
]).then(results => {
console.log(results)
})
</script>
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信