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

JavaScript 中的 Promise 对象

什么是 Promise?

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

主要特点：

1. 状态:

   • Pending（进行中）: 初始状态，既未成功，也未失败。
   • Fulfilled（已成功）: 操作成功完成。
   • Rejected（已失败）: 操作失败。

2. 方法:

   • .then(onFulfilled, onRejected): 注册回调函数，分别在 Promise 成功或失败时调用。
   • .catch(onRejected): 特殊形式的.then()，仅注册拒绝情况下的回调。
   • .finally(onFinally): 无论 Promise 结果如何都会执行的回调。

3. 链式调用

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

4. 静态方法:

   • Promise.resolve(value) 创建一个已解决的 Promise 实例。
   • Promise.reject(reason) 创建一个已拒绝的 Promise 实例。

使用 Promise.all

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

特性:

1. 返回一个新 Promise。
2. 当所有提供的 Promises 全部满足时，返回的 Promise 才会被解决。
3. 如果其中一个 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 才会被解决。

特性:

1. 返回一个新 Promise。
2. 包含所有 Promise 结果的一个数组，不论它们是成功的还是失败的。
3. 每个元素都是一个对象，表示对应的 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);
    });

总结：

1. Promise.all: 必须所有 Promise 都成功才能解决问题。
2. Promise.allSettled: 等待所有 Promise 完结，无论成功与否。
3. Promise.any: 至少一个 Promise 成功即可解决问题。
4. Promise.race: 最快的那个决定一切。