关于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,并将返回结果以数组的形式输出。
关于ES6中Promise的应用-顺序合并Promise,并将返回结果以数组的形式输出的更多相关文章
- ES6中的解构赋值
在解释什么是解构赋值前,我们先来看一下, ES5 中对变量的声明和赋值. var str = 'hello word'; 左边一个变量名,右边可以是字符串,数组或对象. ES6 中增加了一种更为便捷的 ...
- 深入理解 JavaScript 异步系列(3)—— ES6 中的 Promise
第一部分,Promise 加入 ES6 标准 原文地址 http://www.cnblogs.com/wangfupeng1988/p/6515855.html 未经作者允许不得转载! 从 jquer ...
- ES6中的Promise使用总结
One.什么是Promise? Promise是异步编程的解决方案,而它本身也就是一个构造函数,比传统的异步解决[回调函数]和[事件]更合理,更强大. Two.Promise有何作用? 作用:解决回调 ...
- ES6中的Promise和Generator详解
目录 简介 Promise 什么是Promise Promise的特点 Promise的优点 Promise的缺点 Promise的用法 Promise的执行顺序 Promise.prototype. ...
- ES6新特性:Javascript中内置的延迟对象Promise
Promise的基本使用: 利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题, 更简洁地控制函数执行流程: 通过new实例化Promise, 构造函数需要两个参数, 第一个参数为函 ...
- ES6中的Promise用法
Node的产生,大大推动了Javascript这门语言在服务端的发展,使得前端人员可以以很低的门槛转向后端开发. 当然,这并不代表迸发成了全栈.全栈的技能很集中,绝不仅仅是前端会写一些HTML和一些交 ...
- 对于ES6中Promise的个人见解
1.js中常见的异步 JavaScript可以响应用户的一些异步交互,比如单击鼠标和按键盘等操作. let button = document.getElementById("btn&quo ...
- ES6中Promise对象个人理解
Promise是ES6原生提供的一个用来传递异步消息的对象.它减少了传统ajax金字塔回调,可以将异步操作以同步操作的流程表达出来使得代码维护和可读性方面好很多. Promise的状态: 既然是用来传 ...
- ES6中promise的使用方法
先看看ES5中异步编程的使用. let ajax = function (callBlack) { setTimeout(function () { callBlack && call ...
随机推荐
- vue3源码难学,先从petite-vue开始吧
如今这个世道,作为一个有几年工作经验的前端,不学点框架源码都感觉要被抛弃了,react或vue要能吹吹牛吧,最好能造个轮子,听说vue3源码好学点,那么学学vue3,但是学起来还是那么费劲,感觉快放弃 ...
- 构建前端第3篇之---使用scss
张艳涛 写于2021-1-20 主要解决俩个问题: 在单个vue文件中 <style rel="stylesheet/scss" lang="scss"& ...
- 常用PLC与ifix/intouch驱动地址匹配规则
常用PLC与IFIX /的InTouch驱动地址匹配规则如下(持续更新): 1.施耐德M580<----->Intouch的/ IFIX: AI:400102<-----> 4 ...
- nginx 的安装、优化、服务器集群
一.安装 下载地址:http://nginx.org 找到 stable 稳定版 安装准备:nginx 依赖于pcre(正则)库,如果没有安装pcre先安装 yum install pcre pcr ...
- 图解 HTTP 连接管理
熟悉我的小伙伴都知道,我之前肝了本<HTTP 核心总结>的 PDF,这本 PDF 是取自我 HTTP 系列文章的汇总,然而我写的 HTTP 相关内容都是一年前了,我回头看了一下这本 PDF ...
- 大数据学习(11)—— Hive元数据服务模式搭建
这一篇介绍Hive的安装及操作.版本是Hive3.1.2. 调整部署节点 在Hadoop篇里,我用了5台虚拟机来搭建集群,但是我的电脑只有8G内存,虚拟机启动之后卡到没法操作,把自己坑惨了. Hive ...
- 18Oracle入门
1 Oracle的服务 Oracle的监听服务:OralceOraDB12Home1TNSListener 需要通过程序链接数据库进行开发的时候,此服务必须打开,如果只是在本机使用,此服务可不启动 O ...
- spring框架的学习->从零开始学JAVA系列
目录 Spring框架的学习 框架的概念 框架的使用 Spring框架的引入 概念 作用 内容 SpringIOC的学习 概念 作用 基本使用流程 SpringIOC创建对象的三种方式 通过构造器方式 ...
- C++ //继承同名静态成员处理方式
1 //继承同名静态成员处理方式 2 #include <iostream> 3 #include <string> 4 using namespace std; 5 6 cl ...
- 2020Android高级开发面试题以及答案整理,持续更新中~
本篇收录了一些大厂面试中经常会遇到的经典面试题,并且我做好了整理分类.虽然今年的金九银十已经过去了,但是可以为明年的金三银四做准备啊,相信每一个跳槽季都有很多的前端开发者蠢蠢欲动,通过对本篇知识的整理 ...