关于ES6中Promise的应用-顺序合并Promise,并将返回结果以数组的形式输出
1.Promise 基础知识梳理
创建一个Promise实例
const promise = new Promise(function(resolve, reject) {if (success){resolve(value);} else {reject(error);} });
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,JavaScript 引擎提供,不用自己部署。
Promise实例生成以后,可以使用then方法分别制定resolved状态和rejected状态的回调函数。
promise.then(value => {}, error => {})
then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。
fetch("/posts.json").then(file=> {file.json()}).then(data => {});
上面的代码使用then方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。
Promise.all方法用于将多个Promise实例包装成一个新的实例。
const p = Promise.all([p1, p2, p3]);
上面代码中,Promise.all方法接受一个数组作为参数,p1,p2,p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为Promise实例,再进一步处理。
p的状态由p1,p2,p3决定,分成两种情况。
(1)只有p1,p2,p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1,p2,p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1,p2,p3之中有一个被rejected,p的状态就变成rejected,此时第一个被rejected的实例的返回值,会传递给p的回调函数。
Promise.race方法也是用于将多个Promise实例包装成一个新的实例。
const p = Promise.race([p1, p2, p3]);
上面代码中,只要p1,p2,p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。
Promise.resolve()将现有对象转为 Promise 对象。
2. 一道关于Promise的应用示例
const timeout = ms => new Promise((resolve) => {setTimeout(() => {resolve();}, ms)});const ajax1 = () => timeout(1000).then(() => {console.log('1')return 1;});const ajax2 = () => timeout(1000).then(() => {console.log('2')return 2});const ajax3 = () => timeout(1000).then(() => {console.log('3')return 3});const mergePromise = ajaxArray => {let result = []let promise = Promise.resolve()ajaxArray.forEach(function (item) {promise = promise.then(item)result.push(promise)})return Promise.all(result)};mergePromise([ajax1, ajax2, ajax3]).then(data => {console.log('done')console.log(data) //[1,2,3]});
按顺序合并Promise,并将返回结果以数组的形式输出。
转载于:https://www.cnblogs.com/RainyBear/p/9337983.html
关于ES6中Promise的应用-顺序合并Promise,并将返回结果以数组的形式输出相关推荐
- ES6中新的AJAX解决方案:Promise、Fetch、Response、Axios
目录 (一)Promise对象:包装结果集 一.Promise对象概念: 二.Promise对象使用: 1. Promise对象总是处于以下三种状态之一: 2. 使用方法: (二)Fench()方法: ...
- 在 ES6中 改良的5个 JavaScript “缺陷”
[译]在 ES6中 改良的5个 JavaScript "缺陷" 原文:http://www.zcfy.cc/article/315 http://www.75team.com/po ...
- php数组分开_PHP学习之五:数组(三)合并、拆分、接合和分解数组
一.合并.拆分.接合和分解数组 1.合并数组 array_merge() 函数将数组合并在一起,返回一个新数组. $a = array("a","b",&quo ...
- 前端学习笔记(5)-ES6中promise、Generator、Module等使用场景
1. Promise 一种异步编程的解决方案,通过一个回调,避免更多的回调 异步编程允许我们在执行一个长时间任务时,程序不需要等待,而是继续执行之后的代码,直到这些任务完成之后再来通知你,通常是以回调 ...
- es6中promise用法详解
1.含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象. ...
- ES6中的Promise详解
Promise 在 JavaScript 中很早就有各种的开源实现,ES6 将其纳入了官方标准,提供了原生 api 支持,使用更加便捷. 定义 Promise 是一个对象,它用来标识 JavaScri ...
- ES6中的异步对象Promise
回忆一下ES5中的怎么使用异步方法 // es5中的异步回调let ajax = function(callback){console.log('执行') // 执行setTimeout(() =&g ...
- ES6中的Promise使用方法与总结
在javascript中,代码是单线程执行的,对于一些比较耗时的IO操作,都是通过异步回调函数来实现的. 但是这样会存在一个问题,当下一个的操作需要上一个操作的结果时,我们只能把代码嵌到上一个操作的回 ...
- ES6(三)——回调地狱和promise异步任务顺序执行(传参、错误处理)
文章目录 方法一.回调函数(回调地狱) 方法二:promise 2.1异步任务传参(单个) 2.2异步任务传参(多个) 2.3 错误处理 2.4 Promiss对象三大状态: (学名) 2.5 Pro ...
最新文章
- 在CentOS 6.6 64bit上基于源码安装全功能的vim 7.4实录
- MFC 对话框小总结
- 10.5做题——全排列(初赛复习)
- 由浅入深,走进Python装饰器-----第五篇:进阶--类装饰类
- 深入浅出百亿请求高可用Redis(codis)分布式集群揭秘
- 利旧IBM X3650m2 安装esxi5.1提供云桌面(备忘)
- python单词字典排序_python字典排序
- pythoon介绍、安装环境、基础知识、练习题
- nginx发布静态目录备忘
- 从零基础入门Tensorflow2.0 ----四、16.tfrecord基础API使用
- 【python】-- 多进程的基本语法 、进程间数据交互与共享、进程锁和进程池的使用...
- GRE词汇会难记到什么程度
- 360+城市空气质量指数-日度数据、良好天数统计(2001-2022年)
- [SugerTangYL] 时钟管理(分频器、倍频器、锁相环)Verilog
- 火影忍者、英雄联盟国内版、和平精英强开90/120帧方法
- 骑行运动耳机哪个好,五款最适合在骑行中佩戴的耳机分享
- 转:影视娱乐站推广的几个方法
- SingleTask和SingleInstance详解
- Google Play ASO 系列 - 尽力获得官方推荐
- ZigBee网络基础
热门文章
- MSDN Webcast“深入浅出ASP.NET AJAX系列”
- java redis管理_优雅时间管理Java轻松做到,想学么?
- 状态压缩dp(hdu2662)(我综合了一个人的解释和另一个人的代码)
- 打印速度快点的打印机_佳能和爱普生打印机哪个好 高性价比打印机介绍【详解】...
- u盘循环冗余能修复吗_古董修复能修复吗?-恩平 - 商业服务
- jenkins获取远程服务器文件,Jenkins用SSH传输文件到远程服务器
- 计算机视觉预备知识,计算机视觉:泊松融合
- android相机截取矩形框,Android自定义照相机实现只拍摄矩形区域(重传)
- debian编译安装python_编译安装python2.7及相关模块(debian5.0.1)
- 报表 表格间距_从易读性和易操作性两大方面,教你做好表格设计