前段时间做项目,在调用接口的时候,遇到了异步问题。开始是使用定时器,发现效果并不理想,于是又用了回调,效果还好但是,很明显的影响了代码的整洁性。

于是我想起了在面试的那段时间,背过的面试题里,出现过一个专为解决异步问题的新语法,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中有一个实例的状态发生改变(变为fulfilledrejected),Promise的状态就跟着改变。并把第一个改变状态的promise的返回值,传给p的回调函数

  

  好了,以上是我对promise的一些理解,可能不全面,然后有不对的地方,欢迎私信指正.

 

  

前端 ----- 初探ES6 Promise的更多相关文章

  1. 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise

    Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...

  2. ES6 Promise 接口

    构造函数 new Promise(function(resolve, reject){}); 构造函数接受一个函数(executor)作为参数,该函数在返回 Promise 实例之前被调用.函数的两个 ...

  3. Es6 Promise 用法详解

     Promise是什么??    打印出来看看  console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...

  4. ES6 Promise 全面总结

    转载:点击查看原文 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中. @-v-@ 1. Promise本质 Promise ...

  5. ES6 Promise 异步操作

    最近越来越喜欢与大家进行资源分享了,并且及时的同步到自己的园子内,为什么呢? 一.小插曲(气氛搞起) 在上个月末,由于领导的高度重视(haha,这个高度是有多高呢,185就好了),走进了公司骨干员工的 ...

  6. 微信小程序Http高级封装 es6 promise

    公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是  数据请求! 看了下小程序的请求方式大概和a ...

  7. 解析ES6 Promise

    ES6 Promise 概念之类的,大概读者都应该有所知道,接下来我们直入终点. 先让我们来看看什么是Promise吧,他是一个object,类,arry,function? 首先,学习它的时候应该讲 ...

  8. jquery Promise和ES6 Promise的区别

    1. Deferred对象有resolve和reject方法,可以直接修改状态 jquery用Deferred实现了Promise规范,Deferred与ES6 Promise的最大区别是: Defe ...

  9. ES6 Promise对象then方法链式调用

    then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数.then()方法会返回一个新的Promise实例,所以then()方法后面可以继 ...

随机推荐

  1. mysql导出数据到csv文件

    在日常工作中经常会遇见导出表中的数据到csv文件的操作,这里就简单总结一下导出的操作. 下面对csv文件的描述是摘录: 据RFC4180文档设置的,该文档全称Common Format and MIM ...

  2. TPS、QPS和系统吞吐量的区别和理解

    参考:https://blog.csdn.net/u010889616/article/details/83245695 一.QPS/TPSQPS:Queries Per Second意思是“每秒查询 ...

  3. 英语单词character

    来源——tr帮助说明 TR() User Commands TR() NAME tr - translate or delete characters SYNOPSIS tr [OPTION]... ...

  4. idhttp.get返回403错误解决办法

    在GET之前,先指定UserAgent参数IdHTTP1.Request.UserAgent := 'Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; Ma ...

  5. 前端开发本地存储之cookie

    1.cookie cookie是纯文本,没有可执行代码,是指某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端(浏览器)上的数据(通常经过加密).当用户访问了某个网站的时候,我们 ...

  6. win7下redis开机自启动设置

    win7下安装完redis之后,每次开机都得用cmd命令行启动redis,所以就想办法实现开机自启动redis. 一.把启动命令写入bat: E:\redis\redis-server.exe E:\ ...

  7. windows 系统再重启后,USB口失效(鼠标、U盘都无法识别)的过程及解决方法

    今天都差点忘记写随笔.今天在工作中,将电脑重启了一次,悲催了.重启完成后,鼠标无法使用了.最初认为 鼠标的问题,就一直"砸",但后来换了鼠标,仍然不能使用,开始认为没这边简单,拿出 ...

  8. (转)pd.read_csv之OSError: Initializing from file failed的解决方案

    转:https://blog.csdn.net/funnyPython/article/details/78532102 rides = pd.read_csv(data_path)1 # OSErr ...

  9. thinkphp 级联菜单实现

    养殖场->栋舍级联菜单 //获取默认养殖场和栋舍信息 public function sbjr(){ $yzc_model=M("Yzc"); $list = $yzc_mo ...

  10. 用maven给SpringBoot项目打包

    注意要点: 1.注意某个moule有依赖需要在对应的pom.xml里填写有关的信息,如: <dependencies> <dependency> <artifactId& ...