JavaScript 中从头开始实现 Polyfills PromiseallSettled 教程

在 JavaScript 的异步编程领域，Promise.allSettled 是一个非常实用的方法。它允许我们并行处理多个 Promise，无论每个 Promise 的最终状态是成功还是失败，都会返回一个新的 Promise，该 Promise 解决时会包含一个数组，数组中的每个元素对应原始 Promise 的结果。如果想要深入理解 Promise.allSettled 的原理，自己动手实现一个 Polyfill 是个不错的方法。

我们要明确 Promise.allSettled 的基本行为。它接收一个 Promise 数组作为参数，返回一个新的 Promise。当所有输入的 Promise 都已经完成（不管是成功还是失败），返回的 Promise 就会被解决，其解决值是一个数组，数组中的每个元素都是一个对象，对象包含 status（取值为 fulfilled 或 rejected）和 value（成功时的值或失败时的原因）。

下面开始实现 Polyfill。我们定义一个函数 myPromiseAllSettled，它接收一个 promises 数组作为参数：

function myPromiseAllSettled(promises) {
    return new Promise((resolve) => {
        if (!Array.isArray(promises) || promises.length === 0) {
            resolve([]);
            return;
        }
        const results = [];
        let completedCount = 0;
        promises.forEach((promise, index) => {
            Promise.resolve(promise)
              .then((value) => {
                    results[index] = { status: 'fulfilled', value };
                    completedCount++;
                    if (completedCount === promises.length) {
                        resolve(results);
                    }
                })
              .catch((reason) => {
                    results[index] = { status:'rejected', reason };
                    completedCount++;
                    if (completedCount === promises.length) {
                        resolve(results);
                    }
                });
        });
    });
}

在这段代码中，我们首先检查传入的 promises 是否是数组且不为空。如果不满足条件，直接返回一个空数组的已解决 Promise。接着，我们创建了一个 results 数组来存储每个 Promise 的结果，以及一个 completedCount 变量来记录已经完成的 Promise 数量。

通过 forEach 遍历 promises 数组，对每个 Promise 使用 Promise.resolve 进行处理。如果 Promise 成功，将结果存入 results 数组并更新 completedCount，当所有 Promise 都完成时，调用 resolve 返回结果数组。如果 Promise 失败，同样存入结果并更新计数，直到所有 Promise 都处理完毕后返回结果。

通过这样的实现，我们就完成了 Promise.allSettled 的 Polyfill，更深入地理解了其内部的运行机制，这对于优化异步代码和处理复杂的异步操作场景都非常有帮助。