Javascript Promise 学习笔记
1. 定义:Promise是抽象异步处理对象以及对其进行各种操作的组件,它把异步处理对象和异步处理规则采用统一的接口进行规范化。
2. ES6 Promises 标准中定义的API:
a) Constructor:采用new来实例化,
var promise = new Promise(function(resolve, reject) {…});
b) Instance Method:使用then方法设置成功(resolve)和失败(reject)时的回调函数,
promise.then(onFulfilled, onRejected),
promise.catch(onRejected),其中,catch只是then的别名而已;
c) Static Method:一些其他的辅助方法,比如all(),resolve()。
3. Promise 状态。三种状态:Pending(初始化)、Fulfilled和Rejected。在then后执行的函数可以肯定地说只会被调用一次。
promise对象被 resolve 时的处理 onFulfilled
promise对象被 reject 时的处理 onRejected
图1. Promise调用的执行过程
4. Resolve方法:
a) 静态方法Promise.resolve(value)可以认为是new Promise()方法的快捷方式,是一种语法糖;Promise.reject(error)与之类似;
b) Promise.resolve方法另一个作用就是将thenable对象转换为promise对象,比如jQuery.ajax()。
5. Promise在规范上规定Promise只能使用异步调用方式 。所以,promise.then实际上是属于异步调用的。
6. Promise方法链:Promise可以将任意个方法连在一起作为一个方法链(method chain)。例如:
.then(taskA).then(taskB).catch(onRejected).then(finalTask);
方法链将方法串在一起,按照顺序严格执行。
* 注意,ECMAScript 3中catch是保留字,因此在IE8一下不能使用,所以,一般使用promise["catch"]或者then来代替之。
图2. Promise链式调用的执行过程
7. 每次调用then都会返回一个新创建的promise对象,应该尽量避免一个promise执行多个then方法,而是使用链式调用法。
8. Promise和数组:Promise.all([…])在所有promise对象都变为 FulFilled 或 Rejected 状态之后被调用。Promise对象数组中所有promise方法同时调用。
Promise.race为任意一个方法变为 FulFilled 或 Rejected 状态之后被调用,在第一个promise对象变为Fulfilled之后,并不会取消其他promise对象的执行。
9. Promise中的 then 和 catch:
a) 使用promise.then(onFulfilled, onRejected) 的话,在 onFulfilled 中发生异常的话,在 onRejected 中是捕获不到这个异常的。
b) 在 promise.then(onFulfilled).catch(onRejected) 的情况下,then 中产生的异常能在 .catch 中捕获
c) .then 和 .catch 在本质上是没有区别的,需要分场合使用。
10. Deferred拥有 Promise,Deferred和Promise并不是处于竞争的关系,而是Deferred内涵了Promise。使用Deferred,只需要先创建deferred对象,可以在任何时机对 resolve、reject 方法进行调用。
var deferred = new Deferred();
本文摘自JavaScript Promise迷你书(中文版)
Javascript Promise 学习笔记的更多相关文章
- Javascript - Promise学习笔记
最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下. 一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...
- JavaScript正则表达式学习笔记(二) - 打怪升级
本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...
- javascript正则表达式 - 学习笔记
JavaScript 正则表达式 学习笔记 标签(空格分隔): 基础 JavaScript 正则表达式是用于匹配字符串中字符组合的模式.在javascript中,正则表达式也是对象.这些模式被用于Re ...
- JavaScript简易学习笔记
学习地址:http://www.w3school.com.cn/js/index.asp 文字版: https://github.com/songzhenhua/github/blob/master/ ...
- javaScript 对象学习笔记
javaScript 对象学习笔记 关于对象,这对我们软件工程到学生来说是不陌生的. 因为这个内容是在过年学到,事儿多,断断续续,总感觉有一丝不顺畅,但总结还是要写一下的 JavaScript 对象 ...
- JavaScript之Promise学习笔记
一直想知道Promise到底是怎么实现的,网上一搜几十篇文章,看的一脸蒙蔽.最后算是找到几个讲的真心很详细明了的.看了一份源码看了很久很久……最后找大佬问了几处看不懂的地方,大佬只看了十几分钟就看懂了 ...
- Promise 学习笔记 - 时间支配者
本文同步自我的个人博客:http://www.52cik.com/2015/11/08/promise.html JavaScript 的 promises 事实标准称为 Promises/A+.ES ...
- 【MarkMark学习笔记学习笔记】javascript/js 学习笔记
1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...
- Javascript MVC 学习笔记(一) 模型和数据
写在前面 近期在看<MVC的Javascript富应用开发>一书.本来是抱着一口气读完的想法去看的.结果才看了一点就傻眼了:太多不懂的地方了. 仅仅好看一点查一点,一点一点往下看吧,进度虽 ...
随机推荐
- TinyXml快速入门(二)
在<TinyXml快速入门(一)>中我介绍了使用TinyXml库如何创建和打印xml文件,下面我介绍使用tinyxml库对xml文件进行一系列的操作,包括获取xml文件声明,查询指定节点. ...
- DataTable操作工具类DataTableHelper
DataTable操作工具类DataTableHelper. 功能介绍: 将泛型集合填充为数据表 将泛型填充为数据表 将对象集合填充为数据表 将对象填充为数据表 将定IDictionary数据转换为D ...
- Linux命令之 文件归档管理
1.文件相关知识 Linux怎样保存文件 数据 -这里数据就是文件的内容 元数据 -在linux系统中,所有与某个文件相关的额外信息都保存在一个叫做i-节点(inode)的节构中 文件名 -文件名保存 ...
- 跨域信息传递postMessage
var sendToParent = function(event, data, listener) { var message = { event: event, data: data, liste ...
- Try,Catch,Finally三块中如果有Return是怎么个运行顺序
今天看一个Java SSH的面试题,题目大概意思是:try.catch中存在return语句,还会执行finally块吗?如果执行,是return先执行还是finally先执行?如果有多个return ...
- Asp.Net WebAPI 中Cookie 获取操作方式
1. /// <summary> /// 获取上下文中的cookie /// </summary> /// <returns></returns> [H ...
- 迁移/home目录至新硬盘分区总结--无备份情况下
搞了一天,终于成功迁移.由于一开始就没备份过程实在很曲折. 希望本篇对那些没有备份习惯的朋友们有所帮助. 准备工作: sudo vim /etc/fstab 在文件中加入: /dev/sdb8 ...
- jquery的几种异步请求,ajax
http://blog.csdn.net/a5489888/article/details/8523316
- 一些SQL语句的问题
1.getdate()函数问题 go create table table_1( id int primary key identity, name ) not null, daytime datet ...
- thinkphp 配置
ThinkPHP框架中所有配置文件的定义格式均采用返回PHP数组的方式,格式为: //项目配置文件 return array( 'DEFAULT_MODULE' => 'Index', //默认 ...