JS 中 Promise 三剑客 Promise.all、Promise.race 和 Promise.allSettled

本文同步发布在：JS 中 Promise 三剑客 Promise.all、Promise.race 和 Promise.allSettled

从 ES6 开始，Promise 已经写进了 JS 语言标准，统一了用法，并原生提供了 Promise 对象。其3个扩展方法 Promise.all、Promise.race 和 Promise.allSettled 非常好用，这里简单介绍下。

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 可用于类似一个页面有多个请求，需要 loading 等待多个请求都执行完再渲染数据，有一个请求异常时，跳转错误页面。

注意：Promise.all 的正确返回结果数组 arr 与请求的 Promise 数组顺序一致，与异步请求响应返回的顺序无关。

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 字段，用于判断成功和失败的数量，如上传图片成功几张、失败几张。

注意：如果提示“Promise.allSettled is not a function”，请安装“promise.allsettled”。

本文同步发布在：JS 中 Promise 三剑客 Promise.all、Promise.race 和 Promise.allSettled