试图封装一个Promise.all方法

最新推荐文章于 2023-03-14 10:28:21 发布
最新推荐文章于 2023-03-14 10:28:21 发布
阅读量427 收藏 1
点赞数
文章标签： js javascript 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MyGodAdmin/article/details/110228641
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Promise</title>
	</head>
	<body>

		<script type="text/javascript">
			/**
			 * new Promise 接收一个function作为参数，
			 * function中有两个回调函数作为参数，
			 *   一个成功的回调函数，一个是失败的回调函数
			 * **/
			var p3 = new Promise(function(resolve, reject) {
				setTimeout(() => {
					resolve('3秒钟结束了')
				}, 3000)
			})
			var p5 = new Promise(function(resolve, reject) {
				setTimeout(() => {
					resolve('5秒钟结束了')
				}, 5000)
			})
			var p2 = new Promise(function(resolve, reject) {
				setTimeout(() => {
					resolve('2秒钟结束了')
				}, 2000)
			})
			p3.then(r => console.log(r))
			p5.then(r => console.log(r))
			p2.then(r => console.log(r))

			//Promise的链式调用 then中的回调函数可以接收上一次then的返回值
			p2.then(r => {
				console.log(r)
				return 'aaa'
			}).then(c => console.log(c))


			//Promise.all  它是以数组作为对象
			//  当数组中的所有Promise都执行完毕之后才执行then
			//  返回的数据是每个Promise对象数据组成的数组，结果是按照参数顺序执行的
			// Promise.all([p2,p3,p5]).then(res=>console.log(res))
			function promiseAll(arr) {
				let newArr = []
				return new Promise((resolve,reject)=>{
					arr.forEach((item,index) => {
						item.then(r => {
							newArr.push(r)
							let flag = newArr.every(v=>v!=null)
							if(newArr.length==arr.length && flag){
								resolve(newArr)
							}
						})
					})
				})
			}
			promiseAll([p2, p5, p3]).then(r=>console.log(r))
		</script>
	</body>
</html>
MyGodAdmin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
如何利用ES6进行Promise封装总结
10-17
主要介绍了如何利用ES6进行Promise封装总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js代码-基于Promise对象实现Promise.all方法(Promise)
07-15
Promise.all()方法是Promise API中的一个重要组成部分，用于处理多个并发的Promise实例。本篇文章将深入探讨如何基于Promise对象实现Promise.all方法，以及其工作原理和实际应用。 首先，我们需要了解Promise.all的...
封装一个Promise.all玩一哈
MrZachary_zlc的博客
03-23 158
Promise.prototype.all = function(arr) { let results = [] let current = null let counter = 0 return new Promise((resolve,reject) => { function processData(key, value) { results[key] = value if(++counter === arr.length) { r
Promise.all简单封装
weixin_40629549的博客
02-22 808
promise.all 本质上也是一个promise 通过then方法获取值 function myPromiseall(...arguments) { return new Promise((reslove,reject) => { let arr = [], // resolove返回值 err = true, // Promise 状态 ...
手写promise原理系列八：封装Promise.all方法，Promise.all的用法
最新发布
ThisEqualThis的博客
03-14 559
Promise.all 方法的参数是一个 promise 对象组成的数组，当 Promise.all 方法的参数中有一个失败的状态时，直接返回当前失败的 promise 对象的状态以及结果。由上面的同步、异步调用方式可知，不管 promise 对象是同步改变状态还是异步改变状态，Promise.all 的执行结果都是。其实，关键点在于异步改变状态时，如何让 Promise.all 的执行结果变为有序的？的意思，其实就是全部 promise 对象执行成功才返回结果，只要有一个失败，就返回失败的结果。
手写Promise（原生Promise剖析三 - - all方法封装）
weixin_46886227的博客
01-06 1255
前言：上篇文章中，我们以及构建出了基本的then()方法，并且处理掉了一些关键性问题，如链式调用怎么二次封装，链式调用then()方法返回值如何，并且完整的列举出了三种情况，分别是：非Promise，Promise（成功Promise、失败Promise）、抛出异常 , 时的返回值情况。最后我们留下了一个问题，就是有关这次文章的主题，那就是all()方法中，一次传入多个Promise组成的数组，最终结果如何，我们又该如何完美的封装它? 首先，我们就需要了解官方的Promise.all()方法是怎么运作的，
使用Promise封装小程序wx.request的实现方法
10-15
主要介绍了使用Promise封装小程序wx.request的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js代码-用 async 模拟 promise.all
07-14
在JavaScript的世界里，Promise.all是并行处理多个Promise的一个强大工具，它会等待所有Promise都解析（resolve）或第一个Promise被拒绝（reject）时返回结果。然而，有时我们可能需要理解其工作原理，并尝试自己用...
Promise 封装请求，Promise.all 使用
摸鱼小队
06-21 1046
Promise 封装请求，Promise.all 使用
自定义封装实现Promise
qq_41580536的博客
09-08 185
自定义封装实现Promise //原promise对比 // let p = new Promise((resolve, reject) => { // var ids = setTimeout(()=>{ // resolve("success"); // reject("false"); // },1000) // clearTimeout(ids); // reject(
all方法 手写promise_封装一个Promise.allSettled方法
weixin_39707725的博客
12-21 495
[TOC]>[success] # Promise.allSettled**Promise.allSettled** 方法与 **Promise.all** 不同点：1. **Promise.all** ： 有一个请求错误，直接走 **.catch** ，不再走 **.then** 。2. **Promise.allSettled** ： **无论请求对错最终都会返回一个数组对象** 到 ...
javaScript之js模拟封装一个promise
陈小陈的博客
12-05 450
myPromise.js class Kpromise { constructor(handle) { this.status = "pending"; this.value = undefined; // 数组队列保存 this.resolveQueue = []; this.rejectQueue = []; handle(this._resolve.bind(this), this._rejec.
Promise.all() 使用及封装
qq_44130459的博客
09-29 786
Promise.all() 用于多个异步函数全部执行完成，再进行下一步操作的场景；场景举例：页面默认查询且要默认传两个参数（这两个参数是从接口里取到的）
手动封装Promise笔记
weixin_46858768的博客
03-16 276
抽象表达: Promise 是一门新的技术(ES6 规范) Promise 是 JS 中进行异步编程的新解决方案 备注：旧方案是单纯使用回调函数 具体表达: 从语法上来说: Promise 是一个构造函数 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值 指定回调函数的方式更加灵活 1.旧的: 必须在启动异步任务前指定 2. promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务.
手写封装promise.all方法
lx1921593177的博客
02-11 114
手写promise.all方法
手动实现Promise.all
冰雪为融的博客
12-23 302
想要实现Promise.all()功能，关键点 /* * 1、接受一个数组作为参数，或者具有 Iterator 接口的参数 * 2、参数支持Promise对象和普通的对象,如果不是Promise对象就会调用Promise.resolve，将参数转为Promise实例 * 3、返回一个Promise对象,且返回的每个成员都是Promise实例 * 4、只有全部成功才算成功 * * */ Promise.all1 = function (promises) { return new Promis.
手动实现一个 promise.all
lucky569的博客
03-27 657
众所周知，js是一门单线程的语言。所谓单线程就是从上往下执行，也就是同步执行，跟代码顺序有关。业务中涉及到的异步开始是利用回调函数跟事件来解决的，但也因此出现了一个叫回调地狱的问题（也就是回调函数再回调，反复回调好多次…)。于是es6提供了一个叫promise的对象来解决这个问题。 这里不对promise展开赘述，不太清楚的可以移步： https://es6.ruanyifeng.com/?search=%3F.&x=8&y=7#docs/promise 1.Promise.all的用法 P
封装一个promise.all
weixin_42591908的博客
01-13 85
Promise.all是JavaScript中的一个方法，用于将多个Promise对象封装成一个新的Promise对象。它接受一个Promise对象数组作为参数，返回一个新的Promise对象。当所有Promise对象都成功时，新的Promise对象也会成功，并返回所有Promise对象的返回值组成的数组。如果有任意一个Promise对象失败，新的Promise对象也会失败，并返回第一个失败的Pr...
Promise.all、Promise.allSettled、Promise.any、Promise.race
m0_68324632的博客
08-23 6065
Promise的实例方法拓展 Promise.all() ：方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。 Promise.allSettled()：用来确定一组异步操作是否都结束了（不管成功或失败）。所以，它的名字叫做”Settled“，包含了”fulfilled“和”rejected“两种情况。 Promise.any()：ES2021 引入了Promise.any()方法。该方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。 Promi
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值