在promise之前,我们通过回调函数的方式来实现异步操作,当嵌套层数过多时,很容易就会造成回调地狱。promise的出现让异步操作更加优雅。
1. promise状态
promise有三个状态,fulfilled,rejected,pendding.
初始状态为pendding, 当promise被resolve之后,即成功之后状态则更改为fulfilled,当执行rejected后,则状态变为rejected。
2. promise基本用法
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('函数执行了')
}, 2000)
}).then(value => {
console.log(value)
})
3. 并行执行promise
promise中有两个方法,分别为promise.all 以及 promise.race;
promise.all 是等所有任务都完成之后才会之后的then方法 promise.race则是在其中一个任务完成之后就会执行then方法
const promise1 = new Promise(resolve => {
setTimeout(() => {
resolve('promise1执行了')
}, 2000)
})
const promise2 = new Promise(resolve => {
setTimeout(() => {
resolve('promise2执行了')
}, 5000)
})
Promise.all([promise1, promise2]).then(values => {
console.log(values)
})
Promise.race([promise1, promise2]).then(values => {
console.log(values)
})
控制台打印结果如下
promise1执行了
['promise1执行了', 'promise2执行了']
第一个promise1执行了是在2秒后,Promise.race().then执行之后输出的,第二个数组是Promise.all().then执行之后输出的。
promise.then的链式调用
promise.then可以进行链式调用,then接受的值就是上一个then方法的返回值
new Promise(resolve => {
resolve(100)
}).then((value) => {
console.log(value)
return value
}).then().then((value) => {
console.log(value)
}).then(() => {}).then((value) => {
console.log(value)
})
上述代码输出结果为100 100 undefined
当then函数里面没有参数时,即then() 会默认转化为then(value => value),所以第二个100会输出出来, 最后一个undefined是由于上一个then没有返回值,所以会输出undefined.