从 ES6 开始,Promise 已经写进了 JS 语言标准,统一了用法,并原生提供了 Promise 对象。其3个扩展方法 Promise.allPromise.racePromise.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(result => {
    console.log(result)
}).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”。