Promise | all、race 方法(代码版)

这次,主要介绍 Promise 的all方法和race方法的原理。

Promise | 手写原理】 【Promise | catch、finally 方法

all 方法

let fs = require('fs');
let p = new Promise((resolve, reject) => {
    fs.readFile('./name.txt', 'utf8', function (err, data) {
        if (err) {
            reject(err);
        }
        resolve(data);
    });
});
Promise.all([1,2,p ]).then(data => {
    console.log('data', data);
}, err => {
    console.log('err', err);
});
  1. 参数:数组
  2. 链式调用then方法:可以
  1. 返回值:数组 or 失败原因
*   一个项失败了,走入失败态的回调函数 =>失败原因
*   全部成功了,走入成功态的回调函数 => 数组
  1. 数组项,需要判断是否为一个Promise?
  2. 如何按照参数数组的顺序生成结果数组?
  1. 在【手写Promise原理】里面有如何判断是否为Promise,可以参考
  2. 结果数组的顺序与参数数组保持一致:i 计数与参数数组的length相等,即停。
function isPromise(x) {
    if (typeof x === 'function' || (typeof x === 'object' && x != null)) {
        if (typeof x.then === 'function') {
            return true;
        }
    }
    return false;
}

Promise.all = function (values){
    return new Promise((resolve, reject) => {
        let arr = [];
        let i = 0;
        let processData = (key, data) => {
            arr[i] = data;
            if (++i === values.length) {
                resolve(arr);
            }
        };
        for (let i = 0; i < values.length; i++) {
            let current = values[i];
            if (isPromise(current)) {
                current.then(y => {
                    processData(i, y);
                }, reject);
            } else {
                processData(i, current);
            }
        }
    });
};

race 方法

let fs = require('fs');
let p = new Promise((resolve, reject) => {
    fs.readFile('./name.txt', 'utf8', function (err, data) {
        if (err) {
            reject(err);
        }
        resolve(data);
    });
});
Promise.all([2,p ]).then(data => {
    console.log('data', data);
}, err => {
    console.log('err', err);
});
  1. 参数:数组
  2. 链式调用then方法:可以
  1. 返回值:比赛谁先回来
*   一个项失败了,走入失败态的回调函数 =>失败原因
*   先成功的那一项,走入成功态的回调函数 => 比赛
  1. 数组项,需要判断是否为一个Promise?
  1. 在【手写Promise原理】里面有如何判断是否为Promise,可以参考。
function isPromise(x) {
    if (typeof x === 'function' || (typeof x === 'object' && x != null)) {
        if (typeof x.then === 'function') {
            return true;
        }
    }
    return false;
}
Promise.race = function (values){
    return new Promise((resolve, reject) => {
        for (let i = 0; i < values.length; i++) {
            let current = values[i];
            if (isPromise(current)) {
                current.then(resolve, reject);
            } else {
                resolve(current);
            }
        }
    }});
};

原文链接:segmentfault.com

上一篇:VUE 3 新特性学习
下一篇:V8 是怎么跑起来的 —— V8 的 JavaScript 执行管道

相关推荐

  • 🔥 Promise|async|Generator 实现&amp;原理大解析 | 9k字

    笔者刚接触async/await时,就被其暂停执行的特性吸引了,心想在没有原生API支持的情况下,await居然能挂起当前方法,实现暂停执行,我感到十分好奇。好奇心驱使我一层一层剥开有关JS异步编程的...

    2 个月前
  • 高效阅读Github源代码

    三种办法。如果你主要看前端项目的代码,直接看第三种。 1,用Chrome插件Octotree,左侧会出现树形结构,方便你浏览源代码。 (https://img.javascriptcn.com/6...

    2 年前
  • 高效的jQuery代码编写技巧总结

    最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升。本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascript代码。

    3 年前
  • 项目代码的格式化统一配置 Prettier & ESLint

    以前没时间过eslint,每次项目vscode 编辑器的eslint插件就关掉eslint,老项目都没注意过相关的代码规范,这次新项目加入进去实践下! Question 1. 三个插件功自动有...

    2 年前
  • 面试题整理- 手撕代码篇

    手撕代码篇 考察 new 和闭包(某节) 写一个正则匹配字符转成驼峰?(某团) 实现: borderbottomcolor 》 borderBottomColor 扩展:驼峰转连字符 ...

    1 个月前
  • 面试题1:Promise递归实现拉取数据

    题目:请用promise递归实现拉取100条数据,每次拉取20条,结束条件为当次拉取不足20条或者已经拉取100条数据 ...

    1 个月前
  • 面试官你来,130行带你手写完整Promise

    大家好,我是雷锋蜀黍。一直在某些面试宝典看到面试官要你手撸一个promise,今天天气这么好,不如我们来搞一搞。(PS:从未看过别人的实现,本文更像是记录一个思考的过程) 最终的代码完全符合Promi...

    2 个月前
  • 面试专题总结:手撕代码

    简介 希望读者依此构建自己的知识树(思维导图) 偷懒一下:可参考我自己总结思维导图 : 点这里 手撕代码地址:地址 附带:高频面试题积累文档。 来自于(学长、牛客网等平台) 自己开发的博客地址:z...

    2 个月前
  • 面对国内的低代码开发平台,开发人员和企业该如何选择?

    为什么说低代码开发会是一大趋势呢?很多企业为了使IT部门的应用程序创建过程更加轻松,同时又使日常业务用户更容易访问,企业开始转向低代码开发平台。 对于一些中小型企业,没有自己的开发团队或者是那些想要释...

    11 小时前
  • 非常有用的 48 个 JavaScript 代码片段,值得收藏!

    该项目来自于 Github 用户 Chalarangelo,目前已在 Github 上获得了 5000 多Star,精心收集了多达 48 个有用的 JavaScript 代码片段,该用户的代码可以让...

    2 年前

官方社区

扫码加入 JavaScript 社区