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

朱雀 2021-03-29 11:34 909阅读 0赞

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

### Promise.all

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

```javascript
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 数组中谁先返回成功或失败的结果，整体就返回那个结果。

```javascript
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` 表示失败。

```javascript
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”。