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,并将返回结果以数组的形式输出的更多相关文章

  1. ES6中的解构赋值

    在解释什么是解构赋值前,我们先来看一下, ES5 中对变量的声明和赋值. var str = 'hello word'; 左边一个变量名,右边可以是字符串,数组或对象. ES6 中增加了一种更为便捷的 ...

  2. 深入理解 JavaScript 异步系列(3)—— ES6 中的 Promise

    第一部分,Promise 加入 ES6 标准 原文地址 http://www.cnblogs.com/wangfupeng1988/p/6515855.html 未经作者允许不得转载! 从 jquer ...

  3. ES6中的Promise使用总结

    One.什么是Promise? Promise是异步编程的解决方案,而它本身也就是一个构造函数,比传统的异步解决[回调函数]和[事件]更合理,更强大. Two.Promise有何作用? 作用:解决回调 ...

  4. ES6中的Promise和Generator详解

    目录 简介 Promise 什么是Promise Promise的特点 Promise的优点 Promise的缺点 Promise的用法 Promise的执行顺序 Promise.prototype. ...

  5. ES6新特性:Javascript中内置的延迟对象Promise

    Promise的基本使用: 利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题, 更简洁地控制函数执行流程: 通过new实例化Promise,  构造函数需要两个参数, 第一个参数为函 ...

  6. ES6中的Promise用法

    Node的产生,大大推动了Javascript这门语言在服务端的发展,使得前端人员可以以很低的门槛转向后端开发. 当然,这并不代表迸发成了全栈.全栈的技能很集中,绝不仅仅是前端会写一些HTML和一些交 ...

  7. 对于ES6中Promise的个人见解

    1.js中常见的异步 JavaScript可以响应用户的一些异步交互,比如单击鼠标和按键盘等操作. let button = document.getElementById("btn&quo ...

  8. ES6中Promise对象个人理解

    Promise是ES6原生提供的一个用来传递异步消息的对象.它减少了传统ajax金字塔回调,可以将异步操作以同步操作的流程表达出来使得代码维护和可读性方面好很多. Promise的状态: 既然是用来传 ...

  9. ES6中promise的使用方法

    先看看ES5中异步编程的使用. let ajax = function (callBlack) { setTimeout(function () { callBlack && call ...

随机推荐

  1. Python自动化测试面试题-接口篇

    目录 Python自动化测试面试题-经验篇 Python自动化测试面试题-用例设计篇 Python自动化测试面试题-Linux篇 Python自动化测试面试题-MySQL篇 Python自动化测试面试 ...

  2. iTextSharp导出PDF模板(报告)

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.IO;us ...

  3. VM12升级VM15

    之前一直用的12,现在想要升级为15.主要是为了解决kali操作系统版本兼容问题 打开VM12,点击[帮助]-->[软件更新]--> [检查更新] 发现有VM15,点击[了解详情] VM1 ...

  4. (6java)计算机语言发展史

    (6java)计算机语言发展史 机器语言: 程序是0和1的组合,比如:0000.0001.1100110 汇编语言: 程序比机器语言好理解一点点 高级语言: 比较适合老美,苦了英语差的孩子们了,哈哈. ...

  5. C#曲线分析平台的制作(三,三层构架+echarts显示)

    本文依据CSDN另一位网友关于三层构架的简单搭建,基于他的源码进行修改.实现了三层构架合理结构,以及从数据库中传递数值在echarts显示的实验目的. 废话不多说,show me codes: 具体构 ...

  6. vue日记②之兼容各种情况的可跳转链接

    兼容各种情况的可跳转链接 需求 因为聊天气泡颜色原因,发送出去的链接通常模糊不清,而且不能直接跳转,所以我打算已a链接的显示直接抓取所有的网页链接,同时还要兼容富文本框的直接输入图片 这是运行效果 实 ...

  7. 跟我一起写 Makefile(六)

    书写命令 ---- 每条规则中的命令和操作系统Shell的命令行是一致的.make会一按顺序一条一条的执行命令,每条命令的开头必须以[Tab]键开头,除非,命令是紧跟在依赖规则后面的分号后的.在命令行 ...

  8. 课程设计-基于SSM的美容美发造型预约管理系统代码Java理发剪发设计造型系统vue美发店管理系统

    注意:该项目只展示部分功能,如需了解,评论区咨询即可. 1.开发环境 开发语言:Java 后台框架:SSM 前端框架:vue 数据库:MySQL 设计模式:MVC 架构:B/S 源码类型: Web 编 ...

  9. Shell-11-read命令

    read read命令从标准输入读取,并且把输入的内容赋值给变量 参数 示例 1 2 3 while 4 分别赋值变量

  10. MySQL-03-基础管理

    用户和权限管理 用户管理 作用:登录,管理数据库逻辑对象 定义:用户名@'白名单' 白名单支持的方式 wordpress@'10.0.0.%' wordpress@'%' wordpress@'10. ...