Promise合集

Promise.all

Promise.all 可以将多个 Promise 实例包装成一个新的 Promise 实例。所有的 Promise 对象都成功时返回的是一个结果数组，一旦有任何一个 Promise 对象失败则立即返回失败。

let ps1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('success-1')
    }, 6000)
})

let ps2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('success-2')
    }, 3000)
})

let pf1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('fail-1')
    }, 4000)
})

let pf2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('fail-2')
    }, 2000)
})

Promise.all([ps1, ps2]).then(arr => {
    console.log(arr) // 执行成功，输出：['success-1', 'success-2']
}).catch(error => {
    console.log(error)
})

Promise.all([ps1, pf1, ps2, pf2]).then(arr => {
    console.log(arr)
}).catch(error => {
    console.log(error) // 执行失败，输出：fail-2
})

注意：Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

Promise.race

顾名思义，Promise.race 是赛跑的意思，Promise.race 中的 Promise 数组中谁先返回成功或失败的结果，整体就返回那个结果

let ps1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('success-1')
    }, 6000)
})

let ps2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('success-2')
    }, 3000)
})

let pf1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('fail-1')
    }, 4000)
})

let pf2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('fail-2')
    }, 2000)
})

Promise.race([ps1, ps2]).then(result => {
    console.log(result) // 执行成功，输出：success-2
}).catch(error => {
    console.log(error)
})

Promise.race([ps1, ps2, pf1, pf2]).then(result => {
    console.log(result)
}).catch(error => {
    console.log(error) // 执行失败，输出：fail-2
})

注意：Promise.race 中的各 Promise 的执行顺序是无序的。可用于对某些不支持设置 timeout 的请求模拟请求超时和中止请求。

Promise.allSettled

Promise.allSettled 中的 Promise 数组全部执行完才会返回一个对象数组，其中包含了每个 Promise 的执行结果，且都有一个 status 字段，fulfilled 表示成功，rejected 表示失败。

let ps1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('success-1')
    }, 6000)
})

let ps2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('success-2')
    }, 3000)
})

let pf1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('fail-1')
    }, 4000)
})

let pf2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('fail-2')
    }, 2000)
})

Promise.allSettled([ps1, ps2, pf1, pf2]).then(arr => {
    console.log(arr) // 输出：[{status: "fulfilled", value: "success-1"}, {status: "fulfilled", value: "success-2"}, {status: "rejected", reason: "fail-1"}, {status: "rejected", reason: "fail-2"}]
})

注意：Promise.allSettled 返回结果数组 arr 与请求的 Promise 数组顺序一致，与异步请求响应返回的顺序无关。Promise.allSettled 可通过返回的数组中的 status 字段，用于判断成功和失败的数量，如上传图片成功几张、失败几张。

参考链接：https://www.lervor.com/archives/137/

手写Promise:https://juejin.cn/post/6945319439772434469#heading-5

常见面试手写题：https://juejin.cn/post/7033275515880341512 包含所有promise拓展方法手写