JavaScript同步异步处理Promise的常用方法
作者：星极天下第一
Promise是JavaScript中用于异步处理的一种方式,一个Promise代表了一个可能会在将来完成的异步操作,这篇文章主要介绍了JavaScript同步异步处理Promise的常用方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
一、什么是Promise
一个 Promise 是一个代理，它代表一个在创建 promise 时不一定已知的值。它允许你将处理程序与异步操作的最终成功值或失败原因关联起来。
二、Promise的三种状态
- 待定（pending）：初始状态，既没有被兑现，也没有被拒绝。
- 已兑现（fulfilled）：意味着操作成功完成。
- 已拒绝（rejected）：意味着操作失败。
我们在使用Promise时，可以用resolve, reject两个函数来控制其状态，前者时通过，后者是拒绝
三、用Promise处理并发的常用方法
1.Promise.all()
在所有传入的 Promise 都被兑现时兑现；在任意一个 Promise 被拒绝时拒绝。
案例展示：
（1）全部都通过
const promiseA = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseA')
}, 500)
})
const promiseB = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseB')
}, 1000)
})
const promiseC = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseC')
}, 1500)
})
Promise.all([promiseA, promiseB, promiseC])
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})结果：
（2）有一个拒绝
const promiseA = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseA')
}, 500)
})
const promiseB = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseB')
}, 1000)
})
const promiseC = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseC')
}, 1500)
})
Promise.all([promiseA, promiseB, promiseC])
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})结果：
（3）全部被拒绝
const promiseA = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseA')
}, 500)
})
const promiseB = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseB')
}, 1000)
})
const promiseC = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseC')
}, 1500)
})
Promise.all([promiseA, promiseB, promiseC])
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})结果：
2.Promise.allSettled()
在所有的 Promise 都被敲定时兑现。
案例展示：
（1）全部通过
const promiseA = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseA')
}, 500)
})
const promiseB = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseB')
}, 1000)
})
const promiseC = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseC')
}, 1500)
})
Promise.allSettled([promiseA, promiseB, promiseC])
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})结果：
（2）部分被拒绝
const promiseA = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseA')
}, 500)
})
const promiseB = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseB')
}, 1000)
})
const promiseC = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseC')
}, 1500)
})
Promise.allSettled([promiseA, promiseB, promiseC])
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})结果：
（3）全部被拒绝
const promiseA = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseA')
}, 500)
})
const promiseB = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseB')
}, 1000)
})
const promiseC = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseC')
}, 1500)
})
Promise.allSettled([promiseA, promiseB, promiseC])
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})结果：
3.Promise.any()
在任意一个 Promise 被兑现时兑现；仅在所有的 Promise 都被拒绝时才会拒绝。
案例展示：
（1）全部通过
const promiseA = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseA')
}, 5000)
})
const promiseB = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseB')
}, 1000)
})
const promiseC = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseC')
}, 1500)
})
Promise.any([promiseA, promiseB, promiseC])
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})结果：
注意函数触发时间
（2）部分不通过
const promiseA = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseA')
}, 5000)
})
const promiseB = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseB')
}, 1000)
})
const promiseC = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseC')
}, 1500)
})
Promise.any([promiseA, promiseB, promiseC])
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})结果：
（3）全部不通过
const promiseA = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseA')
}, 500)
})
const promiseB = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseB')
}, 1000)
})
const promiseC = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseC')
}, 1500)
})
Promise.any([promiseA, promiseB, promiseC])
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})结果：
4.Promise.race()
在任意一个 Promise 被敲定时敲定（即第一个）。
案例展示：
const promiseA = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseA')
}, 5000)
})
const promiseB = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseB')
}, 1000)
})
const promiseC = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseC')
}, 1500)
})
Promise.race([promiseA, promiseB, promiseC])
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})结果：
const promiseA = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promiseA')
}, 500)
})
const promiseB = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseB')
}, 1000)
})
const promiseC = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promiseC')
}, 1500)
})
Promise.race([promiseA, promiseB, promiseC])
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})结果：
总结
到此这篇关于JavaScript同步异步处理Promise的常用方法的文章就介绍到这了,更多相关JS同步异步处理Promise内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！