首页 > 关于ES6中Promise的应用-顺序合并Promise,并将返回结果以数组的形式输出

关于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

更多相关:

  • Promise 在 JavaScript 中很早就有各种的开源实现,ES6 将其纳入了官方标准,提供了原生 api 支持,使用更加便捷。 定义 Promise 是一个对象,它用来标识 JavaScript 中异步操作的状态(pending, resolve, reject)及结果(data)。 从控制台打印出来一个Promise 对象...

  • 在 Vue.js项目中使用Vuex,Vuex 依赖 Promise,所以如果你的浏览器没有实现 Promise (比如 IE),那么就需要使用一个 polyfill 的库 我们可以通过babel-profill转译 1、安装 npm install --save-dev babel-polyfill 2、在main.js中引入...

  • 本文概要: 1、首先给出结论是:除了几种特殊情况外,在读取实例变量的时候采用直接访问的形式,而在设置实例变量的时候通过属性来做。 2、讲解了使用getter、setter的好处。 3、列举了几种上面提到的特殊情况:有时不能使用setter、有时必须使用setter、有时必须使用getter。 注意:在对象之外访问实例变量时总是应该通过...

  • 一、前言                               avalon.js的影响力愈发强劲,而作为子模块之一的mmDeferred必然成为异步调用模式学习之旅的又一站呢!本文将记录我对mmDeferred的认识,若有纰漏请各位指正,谢谢。项目请见:mmDeferred@github   二、API说明          ...

  •     在网上看到的这道题,答案是3次。因此a和b[2]实例化三次对象,就调用了三次构造方法,而*p[2]只定义了指针,并未实例化对象,所以不调用构造方法。  转载于:https://blog.51cto.com/sydugu/1553403...

  • 草色新雨中, 松声晚窗里。之前我们学习 Power Query 都是用鼠标就完成了很多复杂的操作。虽然 PowerQuery 已经将大部分常用功能内置成到功能区。基本能完成我们大部分的报表自动化功能。但是总有些复杂的或者个性化的问题是开发团队没有预先想到的,这时我们就需要学习 M 语言。一、M 语言在哪里?M语言的函数公式有三个地...

  • 前言从2020年3月份开始,计划写一系列文档--《小白从零开始学编程》,记录自己从0开始学习的一些东西。第一个系列:python,计划从安装、环境搭建、基本语法、到利用Django和Flask两个当前最热的web框架完成一个小的项目第二个系列:可能会选择Go语言,也可能会选择Vue.js。具体情况待定,拭目以待吧。。。基本概念表达式表...

  • 1.1函数1.1.1什么是函数函数就是程序实现模块化的基本单元,一般实现某一功能的集合。函数名:就相当于是程序代码集合的名称参数:就是函数运算时需要参与运算的值被称作为参数函数体:程序的某个功能,进行一系列的逻辑运算return 返回值:函数的返回值能表示函数的运行结果或运行状态。1.1.2函数的作用函数是组织好的,可重复使用的,用来...

  • 原标题:基于Python建立深度神经网络!你学会了嘛?图1 神经网络构造的例子(符号说明:上标[l]表示与第l层;上标(i)表示第i个例子;下标i表示矢量第i项)单层神经网络图2 单层神经网络示例神经元模型是先计算一个线性函数(z=Wx+b),接着再计算一个激活函数。一般来说,神经元模型的输出值是a=g(Wx+b),其中g是激活函数(...

  • 在学习MySQL的时候你会发现,它有非常多的函数,在学习的时候没有侧重。小编刚开始学习的时候也会有这个感觉。不过,经过一段时间的学习之后,小编发现尽管函数有很多,但是常用的却只有那几个。今天小编就把常用的函数汇总一下,为大家能够能好的学习MySQL中的函数。MySQL常使用的函数大概有四类。时间函数、数学函数、字符函数、控制函数。让我...