JavaScript Promise 实现（三）

最新推荐文章于 2025-06-14 12:24:07 发布

Kingcean

最新推荐文章于 2025-06-14 12:24:07 发布

阅读量704

点赞数

分类专栏：网页前端文章标签： Web JavaScript

网页前端专栏收录该内容

17 篇文章

订阅专栏

本文深入探讨了JavaScript中Promise.all函数的工作原理与实现细节，包括如何处理多个Promise对象并确保所有任务完成后才继续执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面我们介绍了 JavaScript 中的 Promise 的简单使用方式和实现原理，但 Promise 除了作为可实例化的类来使用，其本身也包含了许多静态方法，用于处理与之相关的多任务事务。例如，利用 Promise.all 函数，可以传入多个 Promise 对象，当这些对象全部成功完成。那么，这些是如何实现的呢？我们继续以 Promise.all 函数为例，其本质是通过计数器等方式来记录结果，并与输入进行比较，以来判断结果。如下代码，此处就不再过多讲解了。

Promise.all(values) {
    var args = Array.prototype.slice.call(arguments.length === 1 && Array.isArray(arguments[0]) ? arguments[0] : arguments);
    return new Promise(function = (resolve, reject) {
        if (args.length === 0) return resolve([]);
        var remaining = args.length;
        var res = function (i, value) {
            try {
                // 检查 value 是否为 Promise 对象。
                if (value && (typeof value === 'object' || typeof value === 'function') && typeof value.then === "function") {
                    value.then(function (val) { res(i, val); }, reject);
                    return;
                }
 
                // 非 Promise 对象时，即简单赋值。
                args[i] = value;
 
                // 计数器，以及结束时的处理。
                if (--remaining === 0) {
                    resolve(args);
                }
            } catch (ex) {
                reject(ex);
            }
        };
        for (var i = 0; i < args.length; i++) {
            res(i, args[i]);
        }
    });
}

除此之外，还有诸如 Promise.race 这样的函数，相信此处不多说，大家也已明白其实现原理。

【完】

文章类型及复杂度：Web 前端开发进阶。

节选翻译自 MSDN 博文 JavaScript Promise，内容有所调整。

http://blogs.msdn.com/b/kingcean/archive/2016/03/25/promise-in-web.aspx