Promise的理解
- Promise是对异步操作的一种解决方案,一般情况下,如果有异步操作,就需要使用Promise对这个异步操作进行封装
- 使用Promise后可以使代码看起来更加优雅并且易于维护
使用定时器模拟一个异步请求
- Promise接收一个函数作为参数,而这个函数又接收两个参数,这两个参数分别为resolve和reject
- resolve在异步操作被成功执行时调用,而reject在异步操作执行失败时调用
- resolve和reject都是一个函数,它们都接收网络请求传过来的数据
- 对这个数据的具体操作分别放在then()和catch()中执行
new Promise((resolve, reject) => {
setTimeout(() => {
// 成功时调用resolve
resolve('你好')
//失败时调用reject
reject('error message')
}, 1000)
}).then((data) => {
console.log(data) //你好
}).catch((err) => {
console.log(err)
})
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('你好')
reject('error message')
}, 1000)
}).then((data) => {
console.log(data)
}, (err) => {
console.log(err)
})
Promise的三种状态
- pending:等待状态
- fulfill:满足状态
- 当我们主动调用resolve()时,就处于该状态,此时回调then
- reject:拒绝状态
- 当我们主要调用reject()时,就处于该状态,此时回调catch
Promise的链式调用
- 同时执行多个异步操作,在then()方法内部返回
new Promise((resolve) => {resolve(res + '111')})
new Promise((resolve) => {resolve(res + '111')})
可简写成Promise.resolve(res + '111')
- 而
Promise.resolve(res + '111')
还可以进一步简写为res + '111'
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('aaa')
}, 1000)
}).then(res => {
console.log(res, '第一层的10行代码')
// return new Promise((resolve) => {resolve(res + '111')})
return res + '111'
}).then(res => {
console.log(res, '第二层的10行代码')
return Promise.reject('err message')
}).then(res => {
console.log(res, '第三层的10行代码')
}).catch(err => {
console.log(err)
})
Promise中的all方法
- 如果想同时接收到几个异步操作的数据,可以选择调用Promise的all方法,将需要执行的异步操作放入all()方法中执行
- all()方法接收一个数组,then()方法接收的也是一个数组
Promise.all([new Promise(resolve => {
setTimeout(() => {
resolve('result1')
}, 2000)
}),
new Promise(resolve => {
setTimeout(() => {
resolve('result2')
}, 1000)
})
]).then(results => {
console.log(results[0], results[1])
})