在中高级面试中,实现一个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. Spring Data JPA:解析CriteriaBuilder

    源码 在Spring Data JPA相关的文章[地址]中提到了有哪几种方式可以构建Specification的实例,该处需要借助CriteriaBuilder,回顾一下Specification中t ...

  2. Linux CentOS7 安装配置 IPtables

    2021-08-11 1. 前言 防火墙其实就是实现 Linux 下访问控制功能的,分为硬件和软件的防火墙两种类型.无论在何网络中,防火墙工作的地方一定是网络的边缘.防火墙的策略.规则就是去定义防火墙 ...

  3. Javascirpt 面向对象总结-公有/私有

    虽说js是一门面向对象的语言,但是它并不像C++,C#,Java等那样,具有典型的面向对象的特征.因此在这里总结一下如何编写具有面向对象特征的程序. [私有变量] 在对象内部使用'var'关键字来声明 ...

  4. EFCore 开始

    1. 数据准备 新建类库项目--实体 NuGet安装: Microsoft.EntityFrameworkCore 新建类库项目--DbContext NuGet安装: Microsoft.Entit ...

  5. Kubernetes-Pod介绍(-)

    前言 本篇是Kubernetes第四篇,大家一定要把环境搭建起来,看是解决不了问题的,必须实战.从现在开始都是重要的核心概念,此篇偏一些Pod的概念介绍,后续每篇都会有实战. Kubernetes系列 ...

  6. Linux环境搭建及项目部署

    一. VMWare安装图解 1.点击下一步 2.接受条款,下一步 3.选择安装目录,不建议有中文目录和空格目录.下一步 4.下一步 5.这两个选项根据可以爱好习惯选择,下一步 6.安装 7.完成 9. ...

  7. 使用Mosquitto实现MQTT客服端C语言

      上一篇文章已经将mosquitto移植到了arm平台上,现在将使用mosquitto完成mqtt客服端的demo,了解过mqtt协议的小伙伴都知道,mqtt主要分为代理服务器.发布者.订阅者三部分 ...

  8. vue-过滤器(filter)的使用详解

    前言 Vue 允许我们在项目中定义过滤器对我们页面的文本展示进行格式的控制,本文就来总结一下过滤器在项目中的常见使用方法. 正文 1.局部过滤器的注册 (1)无参局部过滤器 <div id=&q ...

  9. MacOS开启PPTP协议

    ​ 开启PPTP协议: Mac OS X 系统默认开启了完整性保护(System Intregrity Protection,SIP),所以即使是root帐户也无法修改系统目录中的文件.如果需要修改受 ...

  10. EF Core性能优化(一)

    跟踪查询 返回实体类型的查询是默认会被跟踪的. 这表示可以更改这些实体实例,然后通过 SaveChanges() 持久化这些更改.非跟踪查询 在只读方案中使用结果时,非跟踪查询十分有用. 可以更快速地 ...