ES6新增特性——Promise
一:为什么会出现?
1、场景一:在很多业务需求中,你需要通过ajax进行多次请求,而且每次请求返回的数据需要作为参数进行下一次的请求,于是会出现ajax层层嵌套问题。多个请求操作层层依赖,加上每一层还会有复杂的业务逻辑需要处理,使得代码可读性很差,不直观,难以维护和调试。
注:这种回调函数层层嵌套又称为回调地狱
//请求A $.ajax({success:function (res1) {//请求B $.ajax({success:function (res2) {//请求C $.ajax({success:function (res3) {.............}})}})}})
2、场景二:如果请求C依赖于请求A和B的结果,但A和B之间互不依赖,如果仍写成A嵌套B,B嵌套C的形式,无疑是会消耗更多的等待时间。
故出现Promise对象来更合理和规范地处理异步操作。JS中所有代码都是单线程执行,如果必须是异步执行,可以通过回调函数实现
二:如何使用?
Promise对象是全局对象,可以理解为一个类。
Promise对象有三种状态:
pending:刚创建实例,表示初始化状态
fulfilled:resolve方法调用的时候,表示操作成功
rejected:reject方法调用的时候,表示操作失败
1、通过new生成一个实例,参数是一个匿名函数,其中有两个参数resolve,reject
var pro = new Promise(function (resolve, reject) { //pending状态if ('操作成功') {resolve();//resolve:处理异步操作执行成功后的回调函数 fulfiied状态} else {reject();//reject:处理异步操作失败后的回调函数 rejected状态 }})
2、then()方法:用于处理操作后的处理程序
pro.then(function (res) {//执行resolve回调函数}, function (error) {//执行reject回调函数})
3、catch()方法:处理操作异常的程序
pro.catch(function (error) {//执行reject回调函数})
综合上面两个方法,一般用then方法处理操作成功的程序,catch用来处理操作异常的程序
pro.then(function (res) {//执行resolve回调函数}).catch(function (error) {//执行reject回调函数})
完整示例:最后输出结果为:执行成功
var pro = new Promise(function (resolve, reject) {//pending状态if (true) {resolve('执行成功');//resolve:处理异步操作执行成功后的回调函数 fulfiied状态} else {reject('执行失败');//reject:处理异步操作失败后的回调函数 rejected状态 }})pro.then(function (res) {//执行resolve回调函数 console.log(res)}).catch(function (error) {//执行reject回调函数 console.log(error)})
三:如何解决回调地狱问题?
var pro = new Promise(function (resolve, reject) {if (true) {resolve('执行成功');} else {reject('执行失败');}})pro.then(A).then(B).then(C).catch(D)function A(res) {console.log(res) //执行成功return '给下一个B请求传参:成功执行A';}function B(res) {console.log(res) //给下一个B请求传参:成功执行Areturn '给下一个C请求传参:成功执行B';}function C(res) {console.log(res) //给下一个C请求传参:成功执行B }function D(error) {console.log(error)}
可以通过多个then方法进行链式操作,通过return方式给下一个执行回调函数传参,如上示例的结果是
执行成功
给下一个B请求传参:成功执行A
给下一个C请求传参:成功执行B
四:如何解决场景二问题?
Promise.all()方法:当参数中的实例对象的状态都为fulfilled时,Promise.all()才会执行resolve函数
var pro1 = new Promise(function (resolve, reject) {setTimeout(resolve('成功执行1'),5000);});var pro2 = new Promise(function (resolve, reject) {setTimeout(resolve('成功执行2'),1000);});Promise.all([pro1,pro2]).then(function (res) {console.log(res)})
pro1在1000ms以后成功进入fulfilled状态,但此时Promise.all还是不会有行动,需要等到pro2进入到fulfilled状态时,才会进入then方法,故5000ms以后执行结果为:
[
'成功执行1',
'成功执行2'
]
类似的方法还有Promise.race()方法,参数为Promise实例,只要有一个状态发生改变,不管是成功fulfiied还是失败rejected状态,就会有返回,其他实例再有变化也不会再处理了。
var pro1 = new Promise(function (resolve, reject) {setTimeout(resolve,5000,'成功执行1');});var pro2 = new Promise(function (resolve, reject) {setTimeout(reject,1000,'失败执行2');});Promise.race([pro1,pro2]).then(function (res) {console.log(res)}).catch(function (error) {console.log(error)})
执行结果为:
失败执行2
转载于:https://www.cnblogs.com/zml-mary/p/9126066.html
ES6新增特性——Promise相关推荐
- H5新增、CSS3以及ES5、ES6新增特性
1.H5新增 新增特性:语义化标签.音视频处理API.canvas.拖拽释放API.history API.地理位置API.webSocket.web存储的localStorage和SessionSt ...
- ES6新特性 promise
JavaScript其实是一种单线程执行的语言,这个在前面一篇文章说过.传送阵 在JavaScript代码中,你经常会遇到两种异步编程风格:老派callbacks,新派promise. 回调函数 而老 ...
- 【前端学习之路】ES6新特性 Promise基本方法 、async函数(阮一峰老师、小马哥_老师 课程笔记)
1.Promise.then()方法 Promise 实例具有 then 方法,其第一个参数是 resolve 状态的回调函数,第二个参数是 reject 状态的回调函数,它们是可选的. then 方 ...
- 前端开发的ES6新特性(学生党必看)
一:ES6新特性-let&const 1.常量const const常量(声明之后不允许改变,一旦声明必须初始化, 否则报错) 2.let变量 let声明的变量有严格的作用域 var声明的变量 ...
- ES6、ES7、ES8、ES9、ES10、ES11新增特性一览-介绍
JavaScript 由 Brendan Eich 发明.它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳,JavaScript ...
- es6新增数组、数组去重、es6新特性
ES6新增的数组方法 1.forEach forEach()会遍历数组, 循环体内没有返回值,forEach()循环不会改变原来数组的内容, forEach()有三个参数, 第一个参数是当前元素, 第 ...
- 谈谈ES6新增了哪些特性
一.什么是ES6? ES全称为ECMAScript,它是由国际标准化组织ECMA(全称:European Computer Manufacturers Association)欧洲计算机制造商协会制定 ...
- ES6新增了哪些特性又和ES5有什么不同?
简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的 ...
- lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法?
国庆刚刚结束,我们开始一波新的学习进程吧. ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.作为前端必备技能,我们来快速开始吧 接 ...
最新文章
- java 画图板源代码_非常值得学习的java 绘图板源代码
- ashx 绝对路径得到物理路径
- 一维数组和二维数组互转
- 数据库单表数据过亿_我也能写数据库 —— 单表查询
- 有趣的算法(八):3分钟看懂选择排序(C语言实现)
- 一次函数的斜率公式_一次函数正比例的公式是什么
- 软件测试 _ 基础知识
- oracle 经纬度格式转换,GOOGLE与百度经纬度互转(plsql版)
- 百度网盘下载一直请求中
- java于网络:P2P聊天系统
- 3种方法教你PS快速去掉水印
- 我的世界服务器箱子里无限物品,我的世界让箱子里的物品无限拿的指令 | 手游网游页游攻略大全...
- 【数据结构与算法】之深入解析RSA加密算法的实现原理
- 线性代数:03 向量空间 -- 线性相关与线性无关
- 东华软件张涵诚:政府大数据应用的案例和数据价值释放的方法
- Cocos2d-x Lua库函数剖析(二)cocos2d
- 计算机系统写字板,什么是电脑写字板 电脑写字板使用方法
- 2022年全球及中国植物激活剂行业头部企业市场占有率及排名调研报告
- 链表:两个链表的第一个重合节点
- 极客DIY:只用两步教你制作一款可编程键盘 [译]
热门文章
- java设计模式之九外观模式(Facade)
- 找工作,我该如何是好?
- python视频口碑佳_从万众期待到口碑扑街!用Python来分析一下大家对唐探3的评论...
- html上传文件与后台处理,关于前端html图片和文件上传和后台接收方法
- 闪电Android视频转换器,闪电视频转换器
- mysql星火_mysql的执行计划
- python安装文件乱码_python输出到文件乱码如何解决
- 会议室管理前端页面_福州会议室钟联系方式
- mybatis-plus 多列映射成数组_JavaScript 为什么需要类数组
- 二维数组更改vue_使用vue中的v-for遍历二维数组的方法