在中高级面试中,实现一个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. 在vue中引入版本为"echarts": "^5.1.2"图表

    1. npm install echarts --save 2. 在main.js文件中 import echarts from 'echarts' Vue.prototype.$echarts =  ...

  2. Echarts中Option属性设置

    目录 一.title--标题组件 二.legend--图例组件 三.tooltip--提示框组件 四.grid--可用于调整图例在整个容器中的占位 五.xAxis--x 轴 六.yAxis-y 轴 七 ...

  3. npm 设置同时从多个包源加载包的方法

    随着前后端分离技术的发展成熟,越来越来越多的后台系统甚至前端系统采用前后端分离方式,在大型前后端分离系统中,前端往往包含大量的第三方js 包的引用,各个第三方包又可能依赖另外一个第三方包,因此急需要一 ...

  4. 处理器核、Core、处理器、CPU区别&&指令集架构与微架构的区别&&32位与64位指令集架构说明

    1.处理器核.Core.处理器.CPU的区别 严格来说"处理器核"和" Core "是指处理器内部最核心的部分,是真正的处理器内核:而"处理器&quo ...

  5. 离散化模板题 I ——重复元素离散化后的数字相同

    离散化模板题 I --重复元素离散化后的数字相同 题目描述 现有数列A1, A2, ⋯, An,数列中可能有重复元素. 现在要求输出该数列的离散化数列,重复元素离散化后的数字相同.  输入 第一行,一 ...

  6. Webpack的配置项

    Webpack配置选项 ​ 经历了考研以后,接下来的时间里准备捡起来这些以前学的东西,并且继续向着前端的方向出发,给自己多一条路的选择.话不多说,直接开始. moudule.exports = { / ...

  7. 学习PHP中的高精度计时器HRTime扩展

    不知道大家还记得在学校的时候体育测试时老师带的秒表吗?当枪声想起时,我们开始跑步,这时秒表启动,当我们跑过终点后,老师会按下按扭记录我们的成绩,这就是一个典型的定时器的应用.今天我们要学习的内容其实就 ...

  8. dede调用文章内第一张原始图片(非缩略图)的实现方法

    第一步,修改include/extend.func.php文件,最下面插入函数,查询的是文章附加表,如需查询图片集什么的,改表名即可 //取原图地址 function GetFirstImg($arc ...

  9. Charles的breakpoint功能

    修改请求报文 比如,前端已经控制了输入内容,而我们需要验证接口是否做了校验,这时候怎么测试? 可以通过charles抓包,修改请求报文,修改为在页面上无法输入的内容,发出去然后看后台怎么处理. 修改返 ...

  10. jdbc 数据库连接 长时间空闲 断开连接 ApplicationContext.xml

    数据库连接 长时间空闲 断开连接solution: <property name="validationQuery" value="select 1"/& ...