前端 ----- 初探ES6 Promise
前段时间做项目,在调用接口的时候,遇到了异步问题。开始是使用定时器,发现效果并不理想,于是又用了回调,效果还好但是,很明显的影响了代码的整洁性。
于是我想起了在面试的那段时间,背过的面试题里,出现过一个专为解决异步问题的新语法,ES6中的 Promise。接下来谈谈我对Promise的理解。
首先我们要搞清楚Promise的定义,Promise对象用于异步操作,它表示一个尚未完成且预计在未来完成的异步操作。
也就是说,Promise相当于一个承诺,我们许下承诺,当然就是用来完成的。
然后我们应该知道,它的三种执行状态
即 pending 初始状态,就是未开始操作的状态
fulfilled 代表操作成功的状态
rejected 代表操作失败的状态
接下来我们构建一个Promise,如图
如果操作成功,就会通过resolve跳到.then()函数中
失败,则通过reject()跳到,catch函数中
这只是常规操作
我觉得它比较优秀的地方在于这个
这是当有多个.then语法的时候,那么它的输出结果是什么呢
所以得出一个结论,就是当有多个.then语法的时候,它是按照顺序执行的
除此之外
它还有一些别的语法
Promise.all()
Promise.all()方法接受一个数组作参数,数组中的对象均为promise实例(如果不是一个promise,该项会被用Promise.resolve
转换为一个promise)。
语法如下
Promise.all([a1,a2,a3])
它的状态由这三个promise实例决定,举个例子:
如图所示,打印一下。
...3s后
也就是说,当,proa,prob,proc Promise.all的状态才会变成 fulfilled,也就是说,都返回成功的时候,并且将三个promise的返回结果,按照参数的顺序(并非resolved)的顺序,存入数组
然后我们改动一下代码
...3s后
所以呢,当其中之一状态变为rejected, Promise.all的状态也会变成rejected,并把第一个呗reject的promise的值返回
然后就是 Promise.race()
该方法同样是将多个Promise实例,包装成一个新的Promise实例。
Promise.race([a1,a2,a3])
接着上代码
..2s后
结论:
Promise.race方法同样接受一个数组 作参数。当a1,a2,a3中有一个实例的状态发生改变(变为fulfilled
或rejected
),Promise的状态就跟着改变。并把第一个改变状态的promise的返回值,传给p的回调函数
好了,以上是我对promise的一些理解,可能不全面,然后有不对的地方,欢迎私信指正.
前端 ----- 初探ES6 Promise的更多相关文章
- 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise
Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...
- ES6 Promise 接口
构造函数 new Promise(function(resolve, reject){}); 构造函数接受一个函数(executor)作为参数,该函数在返回 Promise 实例之前被调用.函数的两个 ...
- Es6 Promise 用法详解
Promise是什么?? 打印出来看看 console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...
- ES6 Promise 全面总结
转载:点击查看原文 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中. @-v-@ 1. Promise本质 Promise ...
- ES6 Promise 异步操作
最近越来越喜欢与大家进行资源分享了,并且及时的同步到自己的园子内,为什么呢? 一.小插曲(气氛搞起) 在上个月末,由于领导的高度重视(haha,这个高度是有多高呢,185就好了),走进了公司骨干员工的 ...
- 微信小程序Http高级封装 es6 promise
公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是 数据请求! 看了下小程序的请求方式大概和a ...
- 解析ES6 Promise
ES6 Promise 概念之类的,大概读者都应该有所知道,接下来我们直入终点. 先让我们来看看什么是Promise吧,他是一个object,类,arry,function? 首先,学习它的时候应该讲 ...
- jquery Promise和ES6 Promise的区别
1. Deferred对象有resolve和reject方法,可以直接修改状态 jquery用Deferred实现了Promise规范,Deferred与ES6 Promise的最大区别是: Defe ...
- ES6 Promise对象then方法链式调用
then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数.then()方法会返回一个新的Promise实例,所以then()方法后面可以继 ...
随机推荐
- python笔记(1)--基础知识
一.注释 单行注释 #打印“hello world” print("hello.world!") 另外一种单行注释 print("hello,world!") ...
- SpringBoot application.proerties基本配置
#设置日志输出路径,日志文件名称,输出日志级别 默认日志文件超过10M会切分成多个文件 最新的日志文件就是设置的日志文件 logging.level.root=INFOlogging.level.or ...
- HttpClientUtil工具类封装
package com.jd.ng.shiro.utils; import org.apache.http.HttpEntity; import org.apache.http.HttpStatus; ...
- 20180820-Java 抽象类
Java 抽象类 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不 ...
- ASP.NET MVC3.0 标签提交
[HttpPost] [ValidateInput(false)] public ActionResult UpdateInformationData(ITMovingData p_data) { p ...
- 纯CSS实现项目展示遮罩详情效果
本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果,遮罩采用CSS的绝对定位以及CSS3盒子模型. 本实例应用广泛,很多品牌官方网站均有采用. hover: <!DOCTYP ...
- eclipse中maven工程添加本地库至Maven Dependencies
1.WEB-INF文件夹下添加lib文件夹,文件夹下添加demo-client-0.1-SNAPSHOT.jar 2.pom.xml中配置如下代码: <dependency> <gr ...
- list_car()函数小记
一 ,list_car ,前端传过来参数字典,从字典中获取参数 二, 根据参数去数据库中查找,条件查找 三,将查找出来的对象,flask_sqlalchemy.BaseQuery,然后通过这个对象的 ...
- Scala从入门到放弃(三)Scala的数组、映射、元组和集合
1.数组 1.1定长数组和变长数组 object ArrayDemo { def main(args: Array[String]): Unit = { //初始化一个长度为8的定长数组,其数组元素均 ...
- 部署 H3C CAS E0306
目录 目录 前文列表 H3C CAS CVK Cloud Virtualization Kernel 虚拟化内核平台 CVMCloud Virtualization Manager 虚拟化管理系统 C ...