在中高级面试中,实现一个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. 转:C语言自增自減问题总结

    C语言自增自減问题总结 在程序设计中,经常遇到"i=i+1"和"i=i-1"这两种极为常用的操作.C语言为这种操作提供了两个更为简洁的运算符,即++和--,分别 ...

  2. easyexcel

    导出: package com.example.demo.excel.demo0; import com.alibaba.excel.annotation.ExcelProperty; import ...

  3. Appium自动化(5) - 如何获取android app 的Activity 和 Package

    如果你还想从头学起Appium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1693896.html 前言 在Desired Capab ...

  4. 如果还是看不懂container_of()函数,那算我输

    在linux 内核编程中,会经常见到一个宏函数container_of(ptr,type,member), 但是当你通过追踪源码时,像我们这样的一般人就会绝望了(这一堆都是什么呀? 函数还可以这样定义 ...

  5. Linux RHCE7.0 笔记(常见符号)

    1.无交互式创建用户 echo "password" | passwd --stdin username 2.Linux重定向符号 > :表示将符号左侧的内容,以覆盖的方式输 ...

  6. cmd中输出换行和转义字符

    cmd 中输出换行和转义字符 今天想写一个安装 Windows 任务的 bat 脚本,在命令行界面输出换行和转义一些字符,居然搜索了好久才搜到正确操作,因此记录一下. 在命令行界面输出换行 echo. ...

  7. Gotop安装

    一个方便的图形面板 Github:https://github.com/cjbassi/gotop 安装 git clone --depth 1 https://github.com/cjbassi/ ...

  8. Java中int和short的转化

    例子[1]: 第一种情况: short a = 1; a = a + 1; // 这一步会报错 System.out.print(a); 编译器会报错,原因如下: 第二种情况: short a = 1 ...

  9. PTA——c++类与对象

    对于给定的一个字符串,统计其中数字字符出现的次数. 类和函数接口定义: 设计一个类Solution,其中包含一个成员函数count_digits,其功能是统计传入的string类型参数中数字字符的个数 ...

  10. C++ windows 函数讲解(一)获得屏幕分辨率

    先上代码: #include<bits/stdc++.h> #include<windows.h> using namespace std; int main() { int ...