本文同步发布在: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