(关于promise,以前并不知道是什么,没这个概念。现在来学习总结下)

promise含义

es6的异步编程解决方案。需要new新对象操作api。

promise对象特点

有3中状态:pending(进行中)、fulfilled(已完成)、rejected(已失效),异步操作才有的状态。

2种状态的改变结果,称为:已定型(resolve):

即可将异步操作变为同步操作,避免层层嵌套回调函数。

promise缺点:

对象创建后会立即执行,中途不可中断。

不设置回调时,将抛出异常,不影响外部执行。

promise用法

使用方法:

resolve作用:pending-->resolved 传参:异步成功的data

reject作用:pending-->rejected 传参:error对象

若a=true;就会进resolve()函数,then中将会进data

若a=false;就会进reject()函数,then中将会进err。

promise执行顺序

对象.then()

log输出顺序:1 3 2

new之后直接.then()

log输出顺序:2 1

直接return resolve(),就只执行回调,后面的不再执行。

因为前面return了 所以只会输出1

异步操作例子

异步加载图片:

若图片路径存在,则输出value为img对象

若图片路径不存在或错误,则输出err为Error 加载失败

异步操作ajax:

json数据:

getJson函数带上参数url,可以返回该json数据。

若获取到数据,返回数据;

若访问不到数据,进入then的error,打印:

Error at XMLHttpRequest.xhr.onreadystatechange

调用getJson(url),then中成功则进data,失败则进err。

promise多重异步

创建一个promise的ajax

创建多重异步(2个then,第2个getJson使用return):

结果:

这个是简洁版本:

结果是一样的(两重异步):

Network中:

一句:别让自己的努力只是感动了自己。

----公众号:海瑞菌

ES6知识整理(8)--Promise对象的更多相关文章

  1. ES6知识整理(4)--数组的扩展

    最近工作比较忙,基本每天都会加班到很晚.处理一些客户端兼容问题以及提升用户体验的优化.也将近一周没更文了,现在继续es6的学习总结. 上篇回顾 ES6知识整理(三)--函数的扩展 扩展运算符 形式是3 ...

  2. ES6知识整理(9)--class的基本语法

    (总结完知识点,出去滑板刷街) promise的catch 上一节promise中漏了一个知识点: promise对象可以使用catch来避免每个then中都加error判断,让错误时都进到catch ...

  3. ES6系列_14之promise对象的简单使用

    1.产生原因 在前端开发中,最常见的的就是"回调",我相信很多人对于这个"回调"可谓是印象深刻呢.究其原因是因为层层回调会造成所谓的“回调地狱 (callbac ...

  4. ES6 - 基础学习(8): Promise 对象

    概述 Promise是异步编程的一种解决方案,比传统的解决方案(多层嵌套回调.回调函数和事件)更强大也更合理.从语法上说,Promise是一个对象,从它可以获取异步操作的消息,Promise 还提供了 ...

  5. ES6知识整理(5)--对象的扩展

    个人开这个公众号的初心是为了积累知识,因此并没有做什么推广,再说自己也不知道怎么推广,推广之后又能干些什么.已经将近10天没发文章了,虽然每天都加班,但也不会一点时间都没有,有时还是会懒癌发作不想学习 ...

  6. ES6知识整理(1)--let和const命令

    最近准备在业余空闲时间里一边学习ES6,一边整理相关知识.只有整理过的学习才是有效的学习.也就是学习之后要使用和整理成文,才是正在的学到了... 那么现在开始 LINK START!(首先是第一讲,前 ...

  7. ES6知识整理(2)--变量的解构赋值

    最近准备在业余空闲时间里一边学习ES6,一边整理相关知识.只有整理过的学习才是有效的学习.也就是学习之后要使用和整理成文,才是真正的学到了... 上一篇是一个试水,现在接上. 变量提升 看了下朋友回复 ...

  8. ES6知识整理(10)--class的继承

    (这是es6的第10篇文章.说真的这样的总结之后虽然直观了许多,但是消耗的时间有点长,或许是知识比较复杂的原因吧) 类的继承 有个A类,B类继承A类,那B类实例就可以使用A类实例的所以属性和方法.不包 ...

  9. ES6知识整理(3)--函数的扩展

    只有整理过的学习才是有效的学习.也就是学习之后要使用和整理成文,才是真正的学到了... 最近上班有点忙的关系,于是文章更新会慢些.只有晚上加完班之后,空余时间才能学习整理.因此完成一篇也可能要几个晚上 ...

随机推荐

  1. protocol error, got 'n' as reply type byte + redis如何后台启动

    其它机子的PHP访问redis爆“protocol error, got 'n' as reply type byte ”错误 解决办法: 在redis配置文件redis.conf中注释掉bind配置 ...

  2. Python爬虫常用模块安装

    安装:pip3 install requestspip3 install seleniumpip3 install bs4pip3 install pyquerypip3 install pymysq ...

  3. Python 类对象去重

    注:set 对类对象去重,在于重写__eq__方法和__hash__方法,如果没有重写__hash__会导致People类对象不是可hash的 #!/usr/bin/env python # -*- ...

  4. jenkins 新增用户和修改用户名密码

    在某些条件下,jenkins是不允许注册用户的,这是,你可以采用如下的方式来新增用户,对于老的用户,忘记密码了,使用如下方式来重置密码. 1.系统管理-->管理用户 ----> 新建用户 ...

  5. Tensorboard简介

    Tensorflow官方推出了可视化工具Tensorboard,可以帮助我们实现以上功能,它可以将模型训练过程中的各种数据汇总起来存在自定义的路径与日志文件中,然后在指定的web端可视化地展现这些信息 ...

  6. selenium键盘操作

    键盘操作需引用: from selenium.webdriver.common.keys import Keys 操作码表: NULL = '\ue000' CANCEL = '\ue001' # ^ ...

  7. Thinkphp 3.2 验证码图片显示错误解决方法

    在调用验证码之前加上 ob_clean(); 不显示验证码的代码: public function verify(){ $verify = new \Think\Verify(); $verify-& ...

  8. POJ 2155 Matrix(二维BIT)

    Matrix [题目链接]Matrix [题目类型]二维BIT &题解: bit只能单点更新,恰好,这题可以想一下就可以用单点更新解决了. 只不过最后我交上去居然T了,想了10多分钟,试了一下 ...

  9. js执行上下文

    js在执行是会有一个“准备工作”: 主要内容有 1.变量.函数表达式——>变量声明,默认赋值为undefined: 2.this——>赋值: 3.函数声明——>赋值: 这三种数据的准 ...

  10. struts2实现XML异步交互

    异步交互,在不用重新提交整个页面的情况下可以实现页面局部信息与服务器的交互.在编写异步交互时需要用到一个架包:dom4j,下载地址为:https://dom4j.github.io/ 下面通过例子说明 ...