一、什么是Promise呢?
1、ES6中一个非常重要和好用的特性就是Promise
2、Promise到底是做什么的呢?
Promise是异步编程的一种解决方案。
首先,当我们的开发中有异步操作时,就可以给异步操作包装一个Promise。
二、Promise的三种状态
异步操作之后会有三种状态:
Pending:等待状态,比如正在进行网络请求,或者定时器没有到时间。
Fulfill:满足状态,当我们主动回调了resolve时,就处于该状态,并且会回调.then()
Reject: 拒绝状态,当我们主动回调了reject时,就处于该状态,并且会回调.catch()
三、Promise链式调用
Promise.resolve():将数据包装成Promise对象,并且在内部回调resolve()函数。
Promise.reject():将数据包装成Promise对象,并且在内部回调reject()函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
new Promise((resolve, reject) => {
setTimeout((data) => {
data = "ni hao ya"
const error = "bao cuo le"
if (data) {
resolve(data)
} else {
reject(error)
}
}, 3000)
}).then((data) => {
console.log(data)
}, error => {
console.log(error)
})
</script>
</body>
</html>
链式调用的简化版写法:
如果我们希望数据直接包装成Promise.resolve,那么在then中可以直接返回数据。
所以,我们使用return Promise.resolve(res + '11111') 和return res + '2222' 结果是一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
new Promise((resolve, reject) => {
setTimeout((data) => {
data = "aaa"
resolve(data)
}, 1000)
}).then((res) => {
console.log(res, '第一层的处理代码。')
return Promise.resolve(res + '11111')
}).then((res) => {
console.log(res, '第二层的处理代码。')
return res + '2222'
}).then((res) => {
console.log(res, '第三层的处理代码。')
})
</script>
</body>
</html>
可以看到执行结果如下:
四、Promise的all方法使用
Promise的all方法接受一个数组作为参数,当这个数组里的所有 promise
对象全部变为resolve
或有 reject
状态出现的时候,它才会去调用 .then
方法,它们是并发执行的。常用于等待多个异步网络请求有结果后去做某些操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 传入一个可迭代的,可遍历的,iterator的对象
Promise.all([
new Promise((resolve, reject) => {
setTimeout(() =>{
resolve({'name': '阿杨杨', 'age': 30})
}, 2000)
}),
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({'name': '阿甜甜', 'age': 18})
}, 1000)
})
]).then((results) => {
console.log(results)
})
</script>
</body>
</html>
执行结果如下,可以看到他的执行结果也是一个数组: