在中高级面试中,实现一个promise.all是一个频率较高的面试题
首先分析下 promise.all(),(参考MDN)
  1. 接收一个promise的iterable类型(注:Array,Map,Set都属于ES6的iterable类型)的参数
  2. 返回一个promsie实例
  3. 参数里所有的promise都成功回调后 resolve返回一个数组结果,数组顺序和参数顺序一致
  4. 参数里有一个失败的就会reject,并且reject第一个失败的信息
// 下面实现一下
Promise.prototype.all = function (iterators) {
const promises = Array.from(iterators); // 强制转换成数组
const len = promises.length; // 记录数组的长度
let count = 0; // 标记成功的个数
let resultList = [];// 要返回的 数组结果
return new Promise((resolve, reject) => { // 返回一个promise
for (let index in promises) { // for 循环配合 let 确保 数组结果和参数顺序一致
Promise.resolve(promises[index]) // Promise.resolve,如果是参数是promise 直接返回,如果不是则直接执行Promise.resolve方法 到 then 接受
.then((result) => {
count++; // 记录个数,等于len时 resolve
resultList[index] = result; // 对应赋值结果
if (count === len) {
resolve(resultList);
}
})
.catch(e => {
reject(e); // 当收到错误时,直接reject,返回错误信息
})
}
})
} let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('1')
}, 5000);
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('2')
}, 2000);
})
let p3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('3')
}, 3000);
})
let p4 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('4')
}, 4000);
})
Promise.all([p1, p2, p3, p4]).then(res => {
console.log(res,'res')
}).catch(err => {
console.log(err)
})
//  ['1', '2', '3', '4'] 'res'
理解其中的逻辑,其实并不复杂

js 手动实现 promise.all的功能的更多相关文章

  1. 纯js手动分页

    昨天让做个页面,后台提供所有数据,没有做好分页,需要前端js手动分页. 我参考了 http://www.cnblogs.com/jiechn/p/4095029.html 做了些许改动让分页效果更加完 ...

  2. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  3. Lining.js - 为CSS提供 ::nth-Line 选择器功能

    在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...

  4. js仿手机端九宫格登录功能

    js仿手机端九宫格登录功能 最近闲来无事把以前无聊时开发的小东西拿出来和大家分享下,写的不好的请指出,我会及时修改.谢谢. 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说 ...

  5. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  6. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  7. 大话JS神器之Promise

    前段时间的工作中,由于项目要在前端实现存储,于是便使用了websql,而websql的API涉及到了很多的异步问题,如果采取回调函数的方式处理,代码不够优雅,而且不利于理解,于是便找到了Promise ...

  8. 利用原生JS实现类似浏览器查找高亮功能(转载)

    利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...

  9. JS实现下拉菜单的功能

    <!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...

随机推荐

  1. Flink Streaming状态处理(Working with State)

    参考来源: https://www.jianshu.com/p/6ed0ef5e2b74 https://blog.csdn.net/Fenggms/article/details/102855159 ...

  2. go语言内存对齐

    内存对齐 为保证程序顺利高效的运行,编译器会把各种类型的数据安排到合适的地址并占用合适的长度,这就是内存对齐 每种类型的对齐值就是他的内存边界 64位 类型 对齐边界 (对齐值) int8 1byte ...

  3. 20210819 Emotional Flutter,Medium Counting,Huge Counting,字符消除2

    考场 T1 一下想到了这题,将白块缩短 \(s\) 后维护类似的区间即可. T2 T3 俩计数,直接跳了. T4 的可行 \(t\) 集合相同相当与从 \(n\) 往前跳 kmp 数组,途径点相同,从 ...

  4. docker-compose up -d nginx 报错

    在阿里云ECS上创建nginx容器时,报错如上图. The solution: In your Dockerfile, before running any apt commands, add the ...

  5. 转:C#读取PDF、TXT内容

    //读取PDF内容 private void button2_Click(object sender, EventArgs e) { label3.Text = OnCreated("D:\ ...

  6. 方法重载(Override)

    什么是方法的重写(override 或 overwrite)? 子类继承父类以后,可以对父类中同名同参数的方法,进行覆盖操作. 应用: 重写以后,当创建子类对象以后,通过子类对象调用子父类中的同名同参 ...

  7. 注释swap分区

    grep  "#" fstab |grep "swap" >/dev/null || sed -i 's/^.*swap/#&/g' fstab

  8. PHP中的IMAP扩展简单入门

    对于邮件处理来说,大家比较熟悉的应该是 POP3 . SMTP 这类的协议,而今天我们介绍的 IMAP 其实也是非常常用的一种邮件处理协议.它和 POP3 比较类似,都是以接收处理邮件为主.不过相对于 ...

  9. symfony2已有数据表导入实体时报错 Doctrine does not support reverse engineering from tables that don't have a primary key

    先在配置文件 app/config/config.yml中配置 schema_filter: /^(?!(tablename))/ 即可,或者在出现问题表都加上一个id 然后再使用命令 php app ...

  10. 5ucms的评论列表该怎么写

    查看所有评论 <a href="{sys:plusurl}comment/?id={field:id}">查看所有评论</a> <linkhref=& ...