前端 ----- 初探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 学习] sys模块
sys.stdout sys.stdin
- thinkphp 模板
一. 模板函数 教程https://www.kancloud.cn/manual/thinkphp5/125005 我们往往需要对模板输出变量使用函数,可以使用: {$data.name|md5} ...
- 企业级监控软件Zabbix搭建部署之zabbix在WEB页面中的配置
企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 关于安装请看 http://www.linuxidc.com ...
- 远程连接Linux相关操作
1.远程连接的步骤 编译网卡配置文件,修改onboot参数 vi /etc/sysconfig/network-scripts/ifcfg-ens33进入命令之后将onboot改成onboot=yes ...
- C++ begin()和end()
begin(a)指向数组a的第一个元素,end(a)指向数组a最后一个元素之后的一个元素 #include <iostream> using namespace std; int main ...
- django 的保护机制
- jmeter进阶之Beanshell引用Java代码
在Jmeter实际的使用中,根据业务往往需要构造一些数据源,比如虚拟用户的账号信息等,为了快速灵活,较好的方式往往是通过代码来辅助生产数据. 故在Jmeter支持的众多 sampler 或 前/后置处 ...
- iOS10以上App请求用户授权系统设置权限
<key>NSAppleMusicUsageDescription</key> <string>使用媒体资源</string> <key>N ...
- Oracle分组函数之CUBE
功能介绍: 首先是进行无字段的聚合,然后依次对每个字段进行聚合 创建表: 插入测试数据: ROLLUP: Select t.classid,t.studentname,Sum(t.score) Fro ...
- window10 安装 docker
0.打开Hyper-V. 安装成功后,查看“任务管理器”: 1.下载安装程序. 2.一路"next"安装.安装成功后,桌面会出现图标: 3.双击该图标,成功运行后,右小角出现: 右 ...