如何使用 js 实现一个 Promise.all 方法 PromiseAll

Promise.all

PromiseAll

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

"use strict";

/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-08-0
* @modified
*
* @description
* @difficulty Easy Medium Hard
* @complexity O(n)
* @augments
* @example
* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
* @solutions
*
*/ const log = console.log; const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 0, 'foo');
});
const promise4 = new Promise((resolve, reject) => {
reject(`promise error`);
}); const promisesOK = [promise1, promise2, promise3];
const promisesError = [promise1, promise2, promise3, promise4]; const OK = Promise.all(promisesOK).then((values) => {
log(`promisesOK values =`, values);
}); const Error = Promise.all(promisesError).then((values) => {
log(`promisesError values =`, values);
}).catch(err => {
log(`error =`, err)
}); setTimeout(() => {
log(`\nOK =`, OK)
log(`Error =`, Error)
}, 5); /* $ node promise.all.js error = promise error
promisesOK values = [ 3, 42, 'foo' ] OK = Promise { undefined }
Error = Promise { undefined } */

原理分析

Promise.resolve, Promise.reject

// Promise,不许需要用 Promise 包裹,但为了对齐也使用 Promise 包裹
promise1 = Promise.resolve(3);
// Promise {<fulfilled>: 3} // 未使用 Promise 包裹
promise1.then(v => console.log(v))
// 3
// Promise {<fulfilled>: undefined}
// 使用 Promise 包裹
Promise.resolve(promise1).then(v => console.log(v))
// 3
// Promise {<fulfilled>: undefined} // 非 Promise,需要用 Promise 包裹
promise2 = 42;
// 42 // 未使用 Promise 包裹
promise2.then(v => console.log(v))
// Uncaught TypeError: promise2.then is not a function
// 使用 Promise 包裹
Promise.resolve(promise2).then(v => console.log(v))
// 42
// Promise {<fulfilled>: undefined} // 异常 promise
promise4 = new Promise((resolve, reject) => {
reject(`promise error`);
});
// Promise {<rejected>: "promise error"} // 未使用 catch 处理
Promise.resolve(promise4).then(v => console.log(v))
// Promise {<rejected>: "promise error"}
// Uncaught (in promise) promise error Promise.then (async)
// 使用 catch 处理
Promise.resolve(promise4).then(v => console.log(v)).catch(err => console.log(`OK`))
// OK
// Promise {<fulfilled>: undefined} // Promise.resolve, Promise.reject

solution

PromiseAll

// --unhandled-rejections=strict bug
/* Unhandled promise rejection.
This error originated either by throwing inside of an async function without a catch block,
or by rejecting a promise which was not handled with .catch().
To terminate the node process on unhandled promise rejection,
use the CLI flag `--unhandled-rejections=strict`,
see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode */ "use strict"; /**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-08-14
* @modified
*
* @description PromiseAll
* @difficulty Easy Medium Hard
* @complexity O(n)
* @augments
* @example
* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
* @solutions
*
*/ const log = console.log; const PromiseAll = (promises = []) => {
return new Promise((resolve, reject) => {
let count = 0;
const result = [];
try {
promises.forEach((promise) => {
Promise.resolve(promise).then(value => {
if(value) {
count += 1;
result.push(value)
}
}).catch(err => {
throw new Error(err);
});
});
if(count === promises.length) {
log(`PromiseAll OK`)
return resolve(result)
}
} catch (error) {
log(`Promise Error`, error)
throw new Error(error);
// return reject(error);
}
}).catch(err => {
log(`Promise Error`, err)
return reject(error);
});
}

https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode

"use strict";

/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-08-14
* @modified
*
* @description PromiseAll
* @difficulty Easy Medium Hard
* @complexity O(n)
* @augments
* @example
* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
* @solutions
*
*/ const log = console.log; const PromiseAll = (promises = []) => {
let count = 0;
const result = [];
return new Promise((resolve, reject) => {
promises.forEach((promise) => {
Promise.resolve(promise).then(value => {
if(value) {
result[count] = value;
count += 1;
// result.push(value)
}
if(count === promises.length) {
// log(`PromiseAll OK`, promises)
resolve(result)
}
// if(result.length === promises.length) {
// // log(`PromiseAll OK`, promises)
// resolve(result)
// }
}, err => {
reject(err);
});
});
});
} // test
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 0, 'foo');
});
const promise3 = 42;
// const promise2 = 42;
// const promise3 = new Promise((resolve, reject) => {
// setTimeout(resolve, 0, 'foo');
// });
const promise4 = new Promise((resolve, reject) => {
reject(`promise error`);
}); const promisesOK = [promise1, promise2, promise3];
const promisesError = [promise1, promise2, promise3, promise4]; const OK = PromiseAll(promisesOK).then((values) => {
log(`promisesOK values =`, values);
}); // const OK = Promise.all(promisesOK).then((values) => {
// log(`promisesOK values =`, values);
// }); const Error = PromiseAll(promisesError).then((values) => {
log(`promisesError values =`, values);
}).catch(err => {
log(`catch error =`, err)
}); // const Error = Promise.all(promisesError).then((values) => {
// log(`promisesError values =`, values);
// }).catch(err => {
// log(`error =`, err)
// }); setTimeout(() => {
log(`\nOK =`, OK)
log(`Error =`, Error)
}, 5); /* $ node promiseAll.js error = promise error
promisesOK values = [ 3, 42, 'foo' ] OK = Promise { undefined }
Error = Promise { undefined } */ /*
$ node PromiseAll.js catch error = promise error
promisesOK values = [ 3, 42, 'foo' ] OK = Promise { undefined } */

PromiseAll OK

async promise order OK


"use strict"; /**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-08-14
* @modified
*
* @description PromiseAll
* @difficulty Easy Medium Hard
* @complexity O(n)
* @augments
* @example
* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
* @solutions
*
*/ const log = console.log; const PromiseAll = (promises = [], debug = false) => {
const result = [];
return new Promise((resolve, reject) => {
promises.forEach((promise, i) => {
Promise.resolve(promise).then(value => {
if(value) {
// async promise order OK
result[i] = value;
// async push order bug
// result.push(value)
}
if(result.length === promises.length) {
if(debug) {
log(`PromiseAll OK`, promises)
}
resolve(result)
}
}, err => {
reject(err);
});
});
});
} // test
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 0, 'foo');
});
const promise3 = 42;
// const promise2 = 42;
// const promise3 = new Promise((resolve, reject) => {
// setTimeout(resolve, 0, 'foo');
// });
const promise4 = new Promise((resolve, reject) => {
reject(`promise error`);
}); const promisesOK = [promise1, promise2, promise3];
const promisesError = [promise1, promise2, promise3, promise4]; const OK = PromiseAll(promisesOK).then((values) => {
log(`promisesOK values =`, values);
}); // const OK = Promise.all(promisesOK).then((values) => {
// log(`promisesOK values =`, values);
// }); const Error = PromiseAll(promisesError).then((values) => {
log(`promisesError values =`, values);
}).catch(err => {
log(`catch error =`, err)
}); // const Error = Promise.all(promisesError).then((values) => {
// log(`promisesError values =`, values);
// }).catch(err => {
// log(`error =`, err)
// }); setTimeout(() => {
log(`\nOK =`, OK)
log(`Error =`, Error)
}, 5); /*
$ node PromiseAll.js catch error = promise error
promisesOK values = [ 3, 'foo', 42 ] OK = Promise { undefined } */ /* $ node promise.all.js error = promise error
promisesOK values = [ 3, 'foo', 42 ] OK = Promise { undefined }
Error = Promise { undefined } */

refs

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise




xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


如何使用 js 实现一个 Promise.all 方法 PromiseAll的更多相关文章

  1. 实现一个promise.all方法

    思路: 1:首先明白all的用法 2:promise.all可以接受一个由promise数组作为参数,并且返回一个promise实例, 3:promise.all([a,b,c...]).then方法 ...

  2. 实现一个Promise.all

    用js自己实现一个Promise.all let promiseAll = (promises) => { return new Promise((resolve, reject) => ...

  3. js回调地域 和 用promise解决方法

    回调地狱: function3({cb3()}){ function2({cb2(cb3)}){ //cb2触发了cb3,并传值 function1({cb1(cb2)}){ //cb1触发了cb2, ...

  4. 如何用原生JS实现一个简单的promise

    我又又又回来了,最近真是累的跟狗一样,急需一个大保健回复一下子精力 我现在是一边喝着红牛一边写着博客,好了好了,不扯了,回归整体好吧 先简单来说一下啥是promise吧 它是什么?Promise是一个 ...

  5. js 将一个数组插入到另一个数组的方法

    JavaScript将一个数组插入到另一个数组的方法.分享给大家供大家参考.具体分析如下: 1.通过Array.prototype.push.apply方法将一个数组插入到另外一个数组,下面的代码将数 ...

  6. 使用node.js 文档里的方法写一个web服务器

    刚刚看了node.js文档里的一个小例子,就是用 node.js 写一个web服务器的小例子 上代码 (*^▽^*) //helloworld.js// 使用node.js写一个服务器 const h ...

  7. 教你一步一步实现一个Promise

    Promise我想现在大家都非常熟悉了,主要作用就是解决异步回调问题,这里简单介绍下. Promise规范是CommonJS规范之一,而Promise规范又分了好多种,比如 Promises/A.Pr ...

  8. Promise原理—一步一步实现一个Promise

    promise特点 一个promise的当前状态只能是pending.fulfilled和rejected三种之一.状态改变只能是pending到fulfilled或者pending到rejected ...

  9. Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)

    1.什么是Promise? Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/ ...

随机推荐

  1. OSS与文件系统的对比 文件存储 块存储 对象存储

    基本概念介绍_开发指南_对象存储 OSS-阿里云  https://help.aliyun.com/document_detail/31827.html 强一致性 Object 操作在 OSS 上具有 ...

  2. Java SPI 与 Dubbo SPI

    SPI(Service Provider Interface)是JDK内置的一种服务提供发现机制.本质是将接口实现类的全限定名配置在文件中,并由服务加载器读取配置文件,加载实现类.这样可以在运行时,动 ...

  3. yum安装docker-ce-18.03.0

    yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manager --add-repo http://mir ...

  4. Chrome标签整理

    程序人生 设计素材类网站 关于生活 求职相关网站 Web前端 科技新闻相关网站 优秀资源内含丰富学习资料 项目实例视频资料等 面试简历相关 适合初学者自学的编程网站 国内优秀博客 由于平时经常浏览一些 ...

  5. 13.Linux文件存储系统

    1.Linux 系统中的文件存储结构 Linux系统中常见的目录名称以及相应内容 2.系统内核中的udev 设备管理器会自动把硬件名称规范起来,目的是让用户通过设备文件的名字可以猜出设备大致的属性以及 ...

  6. 第2层交换和生成树协议(STP)__第2层的3种交换功能

    地址学习(Address Learning):第2层交换机和网桥能够记住在一个接口上所收到的每个帧的源设备硬件地址,而且它们会将这个硬件地址信息输入到被称为转发/过滤表的MAC数据库中. 转发/过滤决 ...

  7. P1255 数楼梯 Python实现

    题目描述 楼梯有N阶,上楼可以一步上一阶,也可以一步上二阶. 编一个程序,计算共有多少种不同的走法. 输入格式 一个数字,楼梯数. 输出格式 走的方式几种. 输入输出样例 输入 #1 4 输出 #1 ...

  8. 小程序navigateTo和redirectTo跳转的区别与应用

    最近在做小程序的跳转,发现navigateTo的跳转无法满足业务需求,所以特地记录下 业务需求 类似一个淘宝的在订单界面选择地址的功能,从A页面点击跳转到B页面的地址列表页面,B页面可以选择已有的地址 ...

  9. linux(2)系统目录结构

    前言 平常linux系统用的也不少,那么linux下的每个目录都是用来干什么的,小伙伴们有仔细研究过吗?让我们来了解下吧 Linux 系统目录结构 登录系统后,在当前命令窗口下输入命令: [root@ ...

  10. 2019牛客暑期多校训练营(第六场)D-Move

    >传送门< 题意: 你有n件行李,有k个箱子体积相同的箱子,遵循下面的规则将行李放进箱子里面 每次都取当前最大的可以放进箱子的行李放进箱子,如果该箱子放不进任何行李那么就换一个新的箱子再按 ...