// 1. 准备三个异步函数
const promise1 = Promise.resolve('prom11ise1');
const promise2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 2000, 'promise2');
});
const promise3 = new Promise(function (resolve, reject) {
setTimeout(resolve, 1000, 'promise3');
}); // 2. 封装PromiseAll函数 返回的结果是一个new Promise 信息是一个数组 data
const PromiseAll = (iterator) => {
// 对传入的数据进行浅拷贝,确保有遍历器 - 类数组转换真数组
const promises = Array.from(iterator);
const len = promises.length; // 长度 3
let index = 0; // 每次执行成功+1,当等于长度时,说明所有数据都返回,则可以resolve
let data = []; // 用来存放返回的数据数组
return new Promise((resolve, reject) => {
// 遍历逐个执行 Promise
for (let i in promises) {
promises[i]
.then((res) => {
data[i] = res; // 如果成功了就保存 message
// 先判断 是否全部都执行成功了 成功执行 resolve 并把 data 数组返回
// 如果没有全部执行 index+1
if (++index === len) {
resolve(data);
}
})
.catch((err) => {
reject(err); // 只要有一次error直接返回 reject
});
}
});
}; // 3. 调用
PromiseAll([promise1, promise2, promise3]).then(function(values) {
console.log(values); // 结果: ["prom11ise1", "promise2","promise3"]
});

Promise是一种抽象异步处理对象,参数值为一个回调函数。该回调函数又使用两个参数,参数值分别为两个回调函数(resolve,reject),如果执行成功则调用resolve回调函数,否则执行reject回调函数。

Promise.all介绍:promise.all(promises),promises参数是一个数组(iterable类型),数组内的元素都是promise对象,当里面的每一个promise对象都返回成功resolve的回调函数,它则返回包含数组内每一个元素信息的成功回调函数(resolve),当数组内有一个或以上promise对象返回失败的回调函数,则最后也会返回调用失败的回调函数(reject)。

ps:Array,Map,Set都属于ES6的iterable类型。

封装一个Promise.all 的函数的更多相关文章

  1. JS 封装一个显示时间的函数

    s(); function s (){ var mydate=new Date(); var y = mydate.getFullYear(); var m = mydate.getMonth(); ...

  2. JS 封装一个求圆面积的函数 传值:半径

    y(6) var s = ""; function y (r){ s = Math.PI*r*r; alert(s); }

  3. Node.js用ES6原生Promise对异步函数进行封装

    Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初 ...

  4. 封装一个Ajax工具函数

    /*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type   string   请求的方式  默认是get * 2. url     ...

  5. promise对象的回调函数resolve的参数为另一个promise对象

    /*如果调用resolve函数和reject函数时带有参数,那么它们的参数会被传递给回调函数. reject函数的参数通常是Error对象的实例,表示抛出的错误: resolve函数的参数除了正常的值 ...

  6. js数据类型的检测总结,附面试题--封装一个函数,输入任意,输出他的类型

    一.javascript 中有几种类型的值 1.基本数据类型 : 包括 Undefined.Null.Boolean.Number.String.Symbol (ES6 新增,表示独一无二的值) 特点 ...

  7. 自己封装一个readline函数实现服务器客户端回射

    实现的功能:一次只能读取一行,客户端输入之后,一回车,马上字符串传到服务器端并显示在终端,然后服务器端将字符串又传回给客户端. 服务器端可以接收多个客户端的连接请求,并fork一个子进程来进行服务. ...

  8. JavaScript封装一个函数效果类似内置方法concat()

    JavaScript封装一个函数效果类似内置方法concat() 首先回忆concat()的作用: concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个 ...

  9. 前端笔记之ES678&Webpack&Babel(下)AMD|CMD规范&模块&webpack&Promise对象&Generator函数

    一.AMD和CMD规范(了解) 1.1传统的前端开发多个js文件的关系 yuan.js中定义了一个函数 function mianji(r){ return 3.14 * r * r } main.j ...

  10. 代码改变世界 | 如何封装一个简单的 Koa

    下面给大家带来:封装一个简单的 Koa Koa 是基于 Node.js 平台的下一代 web 开发框架 Koa 是一个新的 web 框架,可以快速而愉快地编写服务端应用程序,本文将跟大家一起学习:封装 ...

随机推荐

  1. 【Java】POI Excel导出 动态行合并

    一般情况: Excel导出一般都是一行一行的记录输出 . 这是Controller代码: 标题行的设置: 标题行会设置获取的结果集的字段名,数据会自动根据设置的名称匹配装填 特殊的需求: 如页面的效果 ...

  2. 【BatchProgram】工作用的小工具 - 自动访问常用页面

    需求: 我需要打开很多页面,但是忘了收藏的话,每次都要重新去找一遍打开 页面很多,不是一两个了,为什么这么多?因为开发情况就是这样啊: 正式生产一个页面,UAT测试一个页面,本地调试一个页面 每日工作 ...

  3. SourceGenerator 生成db to class代码优化结果记录 二

    优化 在上一篇留下的 Dapper AOT 还有什么特别优化点的问题 在仔细阅读生成代码和源码之后,终于得到了答案 个人之前一直以为 Dapper AOT 只用了迭代器去实现,所以理应差不多实现代码却 ...

  4. 位段 -- 内存布局详解C语言

    目录 位段的介绍 位段使用示例: 位段的内存分配 Example 内存分配解析: ## 位段 位段的介绍 位段(二进制位):就是按位存储 位段(bit-field)是C语言中的一种特殊数据类型,它允许 ...

  5. Jupyter 实验室中的 GPU 仪表板

    这两天收到了NVIDIA公司推送的新闻: https://developer.nvidia.com/zh-cn/blog/gpu-dashboards-in-jupyter-lab/?ncid=em- ...

  6. Gradle工程编译报错:Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierImpl.getModuleIdentifier()Lorg/gradle/api/artifacts/ModuleIdentifier;

    1.背景 从git上拉取代码后,编译报错如下: Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierIm ...

  7. StarNet:关于 Element-wise Multiplication 的高性能解释研究 | CVPR 2024

    论文揭示了star operation(元素乘法)在无需加宽网络下,将输入映射到高维非线性特征空间的能力.基于此提出了StarNet,在紧凑的网络结构和较低的能耗下展示了令人印象深刻的性能和低延迟 来 ...

  8. Camera | 8.让rk3568支持前后置摄像头

    一.目标 本文主要目标是,支持前置摄像头0v5648.后置摄像头ov13850,以及移植过程遇到的一些小问题的解决. 1. 摄像头连接图 参考上图,摄像头详细信息如下: 2个摄像头均连接在I2C通道4 ...

  9. rk3568 | rk平台GPIO冲突检测小技巧

    上一篇我们讲解了如何编写gpio驱动,但是实际操作中,经常发现gpio引脚被占用的情况发生,那么本篇文章就详细讲解rxw平台下如何快速定位gpio复用问题以及如何解决. 一.GPIO寄存器查找 要想查 ...

  10. WM_ERASEBKGND

    WM_ERASEBKGND是在当窗口背景必须被擦除时 (例如,窗口的移动,窗口的大小的改变)才发送. 当窗口的一部分无效需要重绘时发送此消息. #define WM_ERASEBKGND 0x0014 ...