js 手动实现 promise.all的功能
在中高级面试中,实现一个promise.all是一个频率较高的面试题
首先分析下 promise.all(),(参考MDN)
- 接收一个promise的iterable类型(注:Array,Map,Set都属于ES6的iterable类型)的参数
- 返回一个promsie实例
- 参数里所有的promise都成功回调后 resolve返回一个数组结果,数组顺序和参数顺序一致
- 参数里有一个失败的就会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的功能的更多相关文章
- 纯js手动分页
昨天让做个页面,后台提供所有数据,没有做好分页,需要前端js手动分页. 我参考了 http://www.cnblogs.com/jiechn/p/4095029.html 做了些许改动让分页效果更加完 ...
- jquery.cookie.js 操作cookie实现记住密码功能的实现代码
jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下. 复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...
- Lining.js - 为CSS提供 ::nth-Line 选择器功能
在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...
- js仿手机端九宫格登录功能
js仿手机端九宫格登录功能 最近闲来无事把以前无聊时开发的小东西拿出来和大家分享下,写的不好的请指出,我会及时修改.谢谢. 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说 ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- 大话JS神器之Promise
前段时间的工作中,由于项目要在前端实现存储,于是便使用了websql,而websql的API涉及到了很多的异步问题,如果采取回调函数的方式处理,代码不够优雅,而且不利于理解,于是便找到了Promise ...
- 利用原生JS实现类似浏览器查找高亮功能(转载)
利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...
- JS实现下拉菜单的功能
<!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...
随机推荐
- VMware ESXi 7.0 U2 SLIC & Unlocker Intel NUC 专用镜像 202109 更新
2021.08.31 更新:集成 "vmkusb-nic-fling" 和 "nvme-community",现在只有一个镜像. 2021.06.16 更新:集 ...
- ucosii操作系统内核源码学习第一篇
根据书本理论介绍以及实际看内核源代码得出: 1. 操作系统默认定义了64个TCB块(为全局变量,编译时候以及分配了,创建一个任务就使用一个,删除一个任务就归还一个)(为什么最大只支持64个任务呢,我们 ...
- zap高性能日志
摘要 日志在整个工程实践中的重要性不言而喻,在选择日志组件的时候也有多方面的考量.详细.正确和及时的反馈是必不可少的,但是整个性能表现是否也是必要考虑的点呢?在长期的实践中发现有的日志组件对于计算资源 ...
- NCNN优化实时面部关键点检测
效果图 演示手机为红米10X pro,可以实时跑人脸检测+关键点识别二个模型. 主要优化 上次看见有人讨论人脸检测与关键点识别,用的是opencv相关,于是想看下深度神经网络相关部分的进展,先选定了推 ...
- ICCV2021 | MicroNet:以极低的 FLOPs 改进图像识别
前言:这篇论文旨在以极低的计算成本解决性能大幅下降的问题.提出了微分解卷积,将卷积矩阵分解为低秩矩阵,将稀疏连接整合到卷积中.提出了一个新的动态激活函数-- Dynamic Shift Max,通过 ...
- openswan源码ubantu下编译、安装、基本环境搭建
openswan的编译过程 文章目录 openswan的编译过程 1. 下载源码: 2. 在虚拟机上解压后编译: 2.1 查看INSTALL文件 2.2 查看文件buildlin.sh文件 3. 查看 ...
- K8S 简介
K8S架构与组件 kubectl: 是一个客户端管理工具,直接管理API server,提供请求给API server,中间有auth认证.用户使用kubectl命令来请求API Server接口完成 ...
- C#简单工厂模式学习
刚学习设计模式,还不是太了解,感觉只有多数据库的情况下才用的到,待学习 首先创建空白解决方案,依次创建类库Model,IDAL,SqlServerDAL,DALFactory,BLL,DBUtilit ...
- Django学习day15BBS项目开发4.0(完结)
每日测验 """ 今日考题: 1.简述自定义标签,过滤器,inclusion_tag的方法,并简要说一说三者的特点及响应流程 2.简述个人侧边栏展示及筛选业务逻辑 3.简 ...
- Django学习day04随堂笔记
每日测验 """ 今日考题 1.列举你知道的orm数据的增删改查方法 2.表关系如何判定,django orm中如何建立表关系,有什么特点和注意事项 3.请画出完整的dj ...