JavaScript 的 Promise 对象和 Promise.all 方法的使用

最新推荐文章于 2026-04-17 09:26:59 发布

原创最新推荐文章于 2026-04-17 09:26:59 发布 · 795 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

Vue

JavaScript 中的 Promise 对象

什么是 Promise?

Promise 是一种用于处理异步操作的对象。它代表一个尚未完成但预计将来会完成的操作及其结果。

主要特点：

状态:
- Pending（进行中）: 初始状态，既未成功，也未失败。
- Fulfilled（已成功）: 操作成功完成。
- Rejected（已失败）: 操作失败。
方法:
- .then(onFulfilled[, onRejected]): 注册回调函数，分别在 Promise 成功或失败时调用。
- .catch(onRejected): 特殊形式的.then()，仅注册拒绝情况下的回调。
- .finally(onFinally): 无论 Promise 结果如何都会执行的回调。

链式调用

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Fetch failed:', error));

静态方法:
- Promise.resolve(value) 创建一个已解决的 Promise 实例。
- Promise.reject(reason) 创建一个已拒绝的 Promise 实例。

使用 Promise.all

Promise.all(iterable) 方法接收一组 Promise 并返回一个新的 Promise。当所有的 Promise 都成功完成后，新的 Promise 将被解决；如果有任何一个 Promise 被拒绝，则整个组合也会立刻被拒绝。

特性:

返回一个新 Promise。
当所有提供的 Promises 全部满足时，返回的 Promise 才会被解决。
如果其中一个 Promise 被拒绝，返回的新 Promise 会立即进入 rejected 状态，并携带第一个被拒绝的原因作为其结果。

const promise1 = new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000));
const promise2 = new Promise((resolve, reject) => setTimeout(() => resolve(2), 2000));

Promise.all([promise1, promise2])
    .then(values => {
        console.log(values); // 输出: [1, 2]
    })
    .catch(error => {
        console.error(error);
    });

Promise.allSettled

Promise.allSettled(iterable) 方法同样接收一组 Promise 并返回一个新的 Promise。当所有的 Promise 都结束（无论是成功还是失败）时，新的 Promise 才会被解决。

特性:

返回一个新 Promise。
包含所有 Promise 结果的一个数组，不论它们是成功的还是失败的。
每个元素都是一个对象，表示对应的 Promise 的最终状态（fulfilled 或 rejected），并带有相应的值或理由。

const promise1 = new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000));
const promise2 = new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000));

Promise.allSettled([promise1, promise2])
    .then(results => {
        console.log(results);
        /*
        输出:
        [
            { status: 'fulfilled', value: 1 },
            { status: 'rejected', reason: Error: Whoops! }
        ]
        */
    });

Promise.any

Promise.any(iterable) 方法接收一组 Promise 并返回一个新的 Promise。当其中的第一个 Promise 成功解决时，新的 Promise 就会被解决；如果所有的 Promise 都被拒绝，则返回的 Promise 会以 AggregateError 形式被拒绝。

特性:

返回一个新 Promise。
只需等待第一个 fulfilled 的 Promise。
如果所有 Promise 都被拒绝，则返回的 Promise 会被拒绝，并附带一个包含所有错误信息的 AggregateError 对象。

const promise1 = new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 1000));
const promise2 = new Promise((resolve, reject) => setTimeout(() => resolve(1), 2000));

Promise.any([promise1, promise2])
    .then(result => {
        console.log(result); // 输出: 1
    })
    .catch(errors => {
        console.error(errors.message); // 输出: All Promises were rejected
    });

Promise.race

Promise.race(iterable) 方法接收一组 Promise 并返回一个新的 Promise。当其中的第一个 Promise 解决（不论是成功还是失败）时，新的 Promise 就会被解决。

特性:

返回一个新 Promise。
只需等待第一个 settled 的 Promise。
第一个 settle 的 Promise 决定了返回 Promise 的状态（fulfilled 或 rejected）。

const promise1 = new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000));
const promise2 = new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000));

Promise.race([promise1, promise2])
    .then(result => {
        console.log(result); // 输出: 1
    })
    .catch(error => {
        console.error(error);
    });

总结：