async/await实现Promise.all()的方式

目录
  • 一、Promise.all()简介
  • 二、async/await实现Promise.all()
    • 1、方式一
    • 2、方式二
  • 三、async/await与Promise.all()结合使用

一、Promise.all()简介

Promise.all() 方法接收一个 promise 的 iterable 类型(注:Array,Map,Set 都属于 ES6 的 iterable 类型)的输入,并且只返回一个Promise实例,并且输入的所有 promise 的 resolve 回调的结果是一个数组

  • Promise的 resolve 回调执行是在所有输入的 promise 的 resolve 回调都结束,或者输入的 iterable 里没有 promise 了的时候
  • Promise的 reject 回调执行是只要任何一个输入的 promise 的 reject 回调执行或者输入不合法的 promise 就会立即抛出错误,并且只要有 reject 就会立即抛出的错误信息。

二、async/await实现Promise.all()

先定义三个Promise实例对象,并放置于一个数组中

        let a = new Promise((res, rej) => {
			res(1)
		}).catch(err => console.log(err))
		let b = new Promise((res, rej) => {
			setTimeout(() => {
				rej(2)
			}, 2000)
		}).catch(err => console.log(err))
		let c = new Promise((res, rej) => {
			res(3)
		}).catch(err => console.log(err))
       const arr = [a, b, c]

1、方式一

-使用async/await,循环遍历Promise实例对象的数组,并把每个Promise对象的结果放置于一个空数组中。

		async function bb() {
			let arr1 = [];
			try {
				for (let i = 0; i < arr.length; i++) {
					let h = await arr[i]
					arr1.push(h)
				}
			} catch (err) {
			}
			return arr1
		}

		bb().then(res => {
			console.log(res); //[1, undefined, 3]
		});

undefined是因为await只处理成功时resolve(),不处理失败异常,故返回undefined

2、方式二

该方面类似实现手写Promise.acll(),等await拿到Promise结果然后count加1,知道count的数值等于数值的长度在resolve()

      const all = (arr) => {
  			return new Promise((resolve, reject) => {
				let length = arr && arr.length
				let count = 0
				let result = []
				if (!arr || arr.length === 0) {
					resolve(result)
				}
				arr.forEach(async (item, index) => {
					try {
						const res = await item
						result[index] = res
						count++
						if (count === length ) {
							resolve(result)
						}
					} catch (err) {
						reject(err)
					}
				});
			})
		}

三、async/await与Promise.all()结合使用

因为Promise.all()返回的也是Promise,所以await 后面可以跟Promise.all()

         function fn() {
			return new Promise((resolve, reject) => {
				resolve(Math.random())
			})
		}
		async function asyncFunc() {
			let result
			try {
				result = await Promise.all([fn(), fn()])
				console.log(result)
			} catch (err) {
				console.log(err, 'err')
			}
			return result
		}
      asyncFunc().then(res => { console.log(res, 'res') })

到此这篇关于async/await实现Promise.all()的文章就介绍到这了,更多相关async/await实现Promise.all()内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • await Streaking解决原理示例详解

    目录 前言 优化async/await demo.json 关于Promise 关于async/await 总结 前言 我们现在在请求接口的过程中,已经习惯了async/await的写法,已经逐渐的代替了promise的写法,但我们在开发的过程中,都是混用的状态,当你体验async/await过的好,就会爱不释手. async/await我们要拒绝 Streaking,啥叫 Streaking,我们看个代码. const foo = async () => { const response =

  • JavaScript async/await使用详解

    目录 一.简介 二.async 三.await 四.案例 附-直接量/字面量 一.简介 async/await是ES20717引入的,主要是简化Promise调用操作,实现了以异步操作像同步的方式去执行,async外部是异步执行的,同步是await的作用. 二.async async,英文意思是异步,当函数(包括函数语句.函数表达式.Lambda表达式)前有async关键字的时候,并且该函数有返回值,函数执行成功,那么该函数就会调用Promise.resove()并隐式的返回一个Promise对

  • ES7中await如何优雅的捕获异常详解

    目录 传统方式 await-to-js 安装 使用 源码 测试用例 结束语 本篇文章介绍的是ES7中await语法糖在调用的时候出现异常如何捕获? 传统方式 try { const res = await getUser(id) }catch(err){ console.log(err) } await让我们使用异步方式开发的代码简便不少,但是每次使用如果都用try..catch来捕获异常反而埋没了它的优势. [ err, user ] = await to(UserModel.findById

  • async/await实现Promise.acll()简介

    目录 一.Promise.all()简介 二.async/await实现Promise.acll() 1.方式一 2.方式二 三.async/await与Promise.acll()结合使用 一.Promise.all()简介 Promise.all() 方法接收一个 promise 的 iterable 类型(注:Array,Map,Set 都属于 ES6 的 iterable 类型)的输入,并且只返回一个Promise实例,并且输入的所有 promise 的 resolve 回调的结果是一个

  • await 错误捕获实现方式源码解析

    目录 前言 Promise 的使用方法 await-to-js 源码 总结 前言 Promise 是一种在 JavaScript 中用于处理异步操作的机制.Promise 在开发中被广泛使用,这篇文章将学习如何优雅的捕获 await 的错误. 资源: 仓库地址:await-to-js 参考文章:How to write async await without try-catch blocks in Javascript (grossman.io) Promise 的使用方法 创建一个 Promi

  • async/await实现Promise.all()的方式

    目录 一.Promise.all()简介 二.async/await实现Promise.all() 1.方式一 2.方式二 三.async/await与Promise.all()结合使用 一.Promise.all()简介 Promise.all() 方法接收一个 promise 的 iterable 类型(注:Array,Map,Set 都属于 ES6 的 iterable 类型)的输入,并且只返回一个Promise实例,并且输入的所有 promise 的 resolve 回调的结果是一个数组

  • async/await与promise(nodejs中的异步操作问题)

    举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文章作者信息.获取全部数据之后渲染文章详情页.数据库操作都是异步的,最直接想到的办法就是一层一层的回调函数,问题出来了:十分不雅观,要是层再多一点还会有更多麻烦.怎么解决?业内为了处理异步操作问题也是拼了,什么async,q,bluebird,co,处理方式不同,各有千秋,感兴趣可以了解一下,但是惊喜的发现nodejs 7.6已经默认支持ES7中的 async/awa

  • Async/Await替代Promise的6个理由

    前言 Node.js 7.6 已经支持 async/await 了,如果你还没有试过,这篇博客将告诉你为什么要用它. Async/Await 简介 对于从未听说过 async/await 的朋友,下面是简介: async/await 是写异步代码的新方式,以前的方法有回调函数和Promise. async/await 是基于 Promise 实现的,它不能用于普通的回调函数. async/await 与 Promise 一样,是非阻塞的. async/await 使得异步代码看起来像同步代码,这

  • 前端常见面试题之async/await和promise的区别

    目录 async async函数定义 作用 async 函数中 return 值如何接受 方式一 方式二 await await定义 作用 关于await的注意点 [[promiseValue]] [promiseValue]哪些能赋值 三者的区别 为什么async/await更好? 总结 async async函数定义 async函数是使用关键字声明的函数.async 是“异步”的简写,所以应该很好理解 async 用于申明一个 function 是异步的. 作用 用于解决:异步程序产生的bu

  • JavaScript中async await更优雅的错误处理方式

    目录 背景 为什么要错误处理 async await 更优雅的错误处理 小结 总结 背景 团队来了新的小伙伴,发现我们的团队代码规范中,要给 async  await 添加 try...catch.他感觉很疑惑,假如有很多个(不集中),那不是要加很多个地方?那不是很不优雅? 为什么要错误处理 JavaScript 是一个单线程的语言,假如不加 try ...catch ,会导致直接报错无法继续执行.当然不意味着你代码中一定要用 try...catch 包住,使用 try...catch 意味着你

  • 深入理解ES7的async/await的用法

    在最开始学习ES6的Promise时,曾写过一篇博文 <promise和co搭配生成器函数方式解决js代码异步流程的比较> ,文章中对比了使用Promise和co模块搭配生成器函数解决js异步的异同. 在文章末尾,提到了ES7的async和await,只是当时只是简单的提了一下,并未做深入探讨. 在前两个月发布的Nodejs V7中,已添加了对async和await的支持,今天就来对这个东东做一下深入的探究.以更加优雅的方法写异步代码. async/await是什么 async/await可以

  • 深入理解JavaScript的async/await

    async 和 await 在干什么 任意一个名称都是有意义的,先从字面意思来理解.async 是"异步"的简写,而 await 的意思是等待.所以应该很好理解 async 用于申明一个 function 是异步的,而 await 等待某个操作完成. 那么async/await到底是干嘛的呢?我们先来简单介绍一下. async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. async/await 是建立在 promise 的基础上.(对promi

  • JS异步堆栈追踪之为什么await胜过Promise

    概述 async/await和Promise的根本区别在于await fn()暂停当前函数的执行,而promise.then(fn)在将fn调用添加到回调链后,继续执行当前函数. const fn = () => console.log('hello') const a = async () => { await fn() // 暂停 fn 的执行 } // 调用 a 时,才恢复 fn 的执行 a() // "hello" const promise = Promise.r

  • 避免地狱async await的使用及原理解析

    目录 引言 谎言和async/await 错误处理 同步代码 async/await try/catch的尴尬 Promise 更关键的一点 回调地狱 promise天堂 总结 引言 无论你对async/await的立场如何,我都想向你说明,根据我的经验,为什么async/await往往会使代码复杂度更高,而不是更低. JavaScript中的async/await功能的效用是基于这样的想法:异步代码很难,相比之下,同步代码更容易.这在客观上是正确的,但在大多数情况下,我不认为async/awa

随机推荐