关于 Promise 的 API ,你了解多少呢?

621 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

关于 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))

结果: image.png

  • 手写一个 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))

结果:

image.png

Promise.race

  • Promise.race:哪个请求先完成就输出哪个