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

于是我想起了在面试的那段时间,背过的面试题里,出现过一个专为解决异步问题的新语法,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. python笔记(1)--基础知识

    一.注释 单行注释 #打印“hello world” print("hello.world!") 另外一种单行注释 print("hello,world!") ...

  2. SpringBoot application.proerties基本配置

    #设置日志输出路径,日志文件名称,输出日志级别 默认日志文件超过10M会切分成多个文件 最新的日志文件就是设置的日志文件 logging.level.root=INFOlogging.level.or ...

  3. HttpClientUtil工具类封装

    package com.jd.ng.shiro.utils; import org.apache.http.HttpEntity; import org.apache.http.HttpStatus; ...

  4. 20180820-Java 抽象类

    Java 抽象类 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不 ...

  5. ASP.NET MVC3.0 标签提交

    [HttpPost] [ValidateInput(false)] public ActionResult UpdateInformationData(ITMovingData p_data) { p ...

  6. 纯CSS实现项目展示遮罩详情效果

    本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果,遮罩采用CSS的绝对定位以及CSS3盒子模型. 本实例应用广泛,很多品牌官方网站均有采用. hover: <!DOCTYP ...

  7. eclipse中maven工程添加本地库至Maven Dependencies

    1.WEB-INF文件夹下添加lib文件夹,文件夹下添加demo-client-0.1-SNAPSHOT.jar 2.pom.xml中配置如下代码: <dependency> <gr ...

  8. list_car()函数小记

    一 ,list_car  ,前端传过来参数字典,从字典中获取参数 二, 根据参数去数据库中查找,条件查找 三,将查找出来的对象,flask_sqlalchemy.BaseQuery,然后通过这个对象的 ...

  9. Scala从入门到放弃(三)Scala的数组、映射、元组和集合

    1.数组 1.1定长数组和变长数组 object ArrayDemo { def main(args: Array[String]): Unit = { //初始化一个长度为8的定长数组,其数组元素均 ...

  10. 部署 H3C CAS E0306

    目录 目录 前文列表 H3C CAS CVK Cloud Virtualization Kernel 虚拟化内核平台 CVMCloud Virtualization Manager 虚拟化管理系统 C ...