小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
关于 Promise
Promise
是前端在处理异步事件时,必须要使用到的方法,用于表示一个异步任务操作的最终结果值。一般来说有以下几种结果:pending(初始状态,既没有被兑现,也没有被拒绝)、fulfilled(成功状态)、reject(失败状态)。在成功或者失败后,去调用 .then()
或是 .catch()
中的函数。
关于 Promise 的常用 API
promise 的基础写法
Promise
的最基础写法,也是模板:
function request() {
return new promise((resolve, reject) => {
//...
})
}
Promise.resolve
Promise.resolve
- 制造一个成功或者失败
function test() {
return Promise.resolve(4)
}
test().then(e => console.log(e))
// 4
// Promise {<fulfilled>: undefined}
- 返回成功很好理解,但是为什么
resolve
也可以返回失败的情况呢?
function test2(){
return Promise.resolve(new Promise((resolve, reject) => reject('拒绝')))
}
test2().then(e => console.log(e))
//Promise {<rejected>: '拒绝'}
在一个 Promise.resolve()
中,再嵌套一层 promise
,并返回错误结果,那么最终结果就是失败的
Promise.reject
Promise.reject
- 制造一个失败
function test() {
return Promise.reject('不行')
}
test().then(null, e => console.log(e))
// 不行
// Promise {<fulfilled>: undefined}
Promise.all
Promise.all()
- 并行执行所有 promise,等待全部成功,只要有一个失败,就不会继续执行其他的 promise
const task1 = () => new Promise((resolve, reject) => setTimeout(() => resolve('过关!'), 1000))
const task2 = () => new Promise((resolve, reject) => setTimeout(() => reject('在第一关失败了'), 2000))
const task3 = () => new Promise((resolve, reject) => setTimeout(() => reject('在第二关失败了'), 3000))
Promise.all([task1(), task2(), task3()]).then(null, r => console.log(r))
// Promise {<pending>}
// 在第一关失败了
那么,如果我想打出所有 promise
的结果和状态呢?那么 Promise.all
肯定是无法满足这样的需求了,这时候就来看看一个你可能没听过的 api:Promise.allSettled
Promise.allSettled
Promise.allSettled
- 等待全部状态改变才执行 示例:
Promise.allSettled([task1(), task2(), task3()]).then(r => console.log(r))
结果:
- 手写一个
Promise.allSettled
Promise.all([
task1().then((value) => ({status: 'ok', value}), (reason) => ({status: 'not ok', reason})),
task2().then((value) => ({status: 'ok', value}), (reason) => ({status: 'not ok', reason})),
task3().then((value) => ({status: 'ok', value}), (reason) => ({status: 'not ok', reason}))
]).then(r => console.log(r))
结果:
Promise.race
Promise.race
:哪个请求先完成就输出哪个