codecademy课程笔记——JavaScript Promise
- const executorFunction = (resolve, reject) => { };
- const myFirstPromise = new Promise(executorFunction);
Promise构造函数接收一个函数(executor function)作为参数,这个函数会在构造函数调用时自动开始执行,这个函数通常发起一个异步操作,并且决定这个promise该如何被settle
这个 executor function 有两个参数,通常被用来指代 resolve() 和 reject() 函数,这两个函数不是程序员定义的,JavaScript会传递它自己的 resolve() 和 reject() 函数到 executor function
resolve 函数把 promise 的状态由 pending 改为 fulfilled,然后 promise 的 resolved value 会作为参数传给 resolve()
reject 函数会 promise 的状态由 pending 改为 rejected,然后 promise 的rejection reason 会作为参数传给 reject()
- const executorFunction = (resolve, reject) => {
- if (someCondition) {
- resolve('I resolved!');
- } else {
- reject('I rejected!');
- }
- }
- const myFirstPromise = new Promise(executorFunction);
上面这段代码:
声明了一个变量 myFirsePromise
myFirsePromise 是用new操作符 调用Promise构造函数构造的
executorFunction() 被传给这个构造函数,这个函数参数有两个参数 resolve 和 reject
如果 someCondition 的计算结果为 true,调用 resolve()
反之,则调用 reject()
这段代码是基于一个简单的条件判断,实际应用时,promise会基于异步操作返回的结果来决定最后的操作。
下面是一个简单的例子
- const inventory = {
- sunglasses: 1900,
- pants: 1088,
- bags: 1344
- };
- // Write your code below:
- function myExecutor(resolve, reject) {
- if(inventory.sunglasses > 0){
- resolve('Sunglasses order processed.')
- } else {
- reject('That item is sold out.')
- }
- }
- let orderSunglasses = () => {
- return new Promise(myExecutor)
- }
- let orderPromise = orderSunglasses()
- console.log(orderPromise) // Promise {'Sunglassed'}
首先,创建了一个函数 myExecutor() ,后面将把这个函数传入 Promise 构造函数中
myExecutor() 的作用:
有两个参数 resolve 和 reject
检测对象 inventory 的属性 sunglasses 是否大于0
如果是 myExecutor() 会以字符串参数 'Sunglasses order processd' 调用 resolve()
如果不是 myExecutor() 会以字符串参数 'That item is sold out.' 调用 reject()
然后创建了一个函数 orderSunglasses() ,这个函数没有参数,并且返回一个以 myExecutor() 为参数构造的Promise对象
然后创建了一个变量 orderPromise 并将 orderSunglasses() 的返回值赋值给这个变量
执行结果为
了解怎么创建一个 Promise 对象是有用的,但是大多数时候,知道怎么去使用它才是关键
你要处理一个异步操作返回的 Promise 对象,这些对象开始都是 pending 状态,但最终都会被处理完成
Consuming Promise (消耗)使用Promise
一个Promise的初始状态是 Pending, 但是 Promise 一定会被处理,.then() 方法就是当 Promise 解决之后要执行的代码
.then() 是一个高阶函数,它以两个回调函数作为参数,用 handlers 指代这些回调函数 (callbacks),当Promise被解决之后,对应的 handler 就会被调用
onFulfilled 成功时的回调函数
onRejected 失败时的回调函数
我们可以在调用 .then() 的时候传入一个或两个hendler,或者不传入 handler
如果没有合适的回调函数,.then() 会返回一个Promise对象
下面是 .then() 的一个例子
- const prom = new Promise((resolve, reject) => {
- resolve('Yay!');
- });
- const handleSuccess = (resolvedValue) => {
- console.log(resolvedValue);
- };
- prom.then(handleSuccess); // Prints: 'Yay!'
prom 是一个Promise 对象 并且 resolved value 是 'Yay!'
handleSuccess() 会打印出传入的参数值
调用 prom 的 .then() 方法,传入函数 handleSuccess()
因为 prom 直接进入 resolve 状态,handleSuccess() 被调用,'Yay!' 被输出到控制台。
但是通常在使用 Promise 时,我们不知道这个对象最终是 resolve 还是 reject,所以需要添加一些逻辑判断:
- let prom = new Promise((resolve, reject) => {
- let num = Math.random();
- if (num < .5 ){
- resolve('Yay!');
- } else {
- reject('Ohhh noooo!');
- }
- });
- const handleSuccess = (resolvedValue) => {
- console.log(resolvedValue);
- };
- const handleFailure = (rejectionReason) => {
- console.log(rejectionReason);
- };
- prom.then(handleSuccess, handleFailure);
prom 会根据一个随机数决定最终的状态。
给 .then() 传入两个函数参数, 第一个是 resolve 状态的回调,第二个是 reject 状态的回调。
separation of concerns
如果没有合适的回调函数,.then() 会返回一个 Promise 对象,这种实现可以让我们把 resolve 的处理逻辑和 reject 状态的处理逻辑分开。我们不必同时传入两个回调函数,而是通过链式调用。
- prom
- .then((resolvedValue) => {
- console.log(resolvedValue);
- })
- .then(null, (rejectionReason) => {
- console.log(rejectionReason);
- });
我们可以使用 .catch() 使代码更易读
.catch() 只有一个参数,onRejected() ,使用 .catch() 和使用 只传入失败回调的 .then() 是同样的效果
- prom
- .then((resolvedValue) => {
- console.log(resolvedValue);
- })
- .catch((rejectionReason) => {
- console.log(rejectionReason);
- });
composition
promise调用链
- firstPromiseFunction()
- .then((firstResolveVal) => {
- return secondPromiseFunction(firstResolveVal);
- })
- .then((secondResolveVal) => {
- console.log(secondResolveVal);
- });
调用 firstPromiseFunction() 得到一个 Promise 对象
调用 .then() 传入一个匿名函数作为成功时的调用
在回调函数中返回一个 secondPromiseFunction() ,参数为第一个 Promise 的 resolved value,这保证了第一个 .then() 的返回值是第二个 promise 对象而不是默认值(有着相同 settled value 的 一个新的promise 对象)
然后第二次调用 .then() ,传入一个回调函数,将第二个 promise 对象的 resolved value 打印出来
concurrency, multiple asynchronous operations happening together
多个异步操作同时进行
Promise.all()
accepts an array of promises as its argument and returns a single promise. That single promise will settle in one of two ways:
Promise.all() 接收一个 Promise 数组作为参数,返回一个 promise 对象:
如果参数中的每个 promise 最终都是 resolved 状态,返回的 promise 对象也会是resolve 状态,并且 resolved value 是每个 promise 对象的 resolved value 组成的数组
如果参数中任何一个 promise 是 rejected 状态, 返回的 promise 对象也会立刻变成 rejected 状态,并且 reject reason 就是那个失败的 promise 的 reject reason (failing fast 快速失败原则)
- let myPromises = Promise.all([returnsPromOne(), returnsPromTwo(), returnsPromThree()]);
- myPromises
- .then((arrayOfValues) => {
- console.log(arrayOfValues);
- })
- .catch((rejectionReason) => {
- console.log(rejectionReason);
- });
声明一个变量,赋值为 调用Promise.all() 的返回值,参数是三个 promise 对象,分别是三个函数的返回值。
调用 .then() 函数处理成功回调,打印 resolved value 数组
调用 .catch() 函数处理失败回调,打印 rejection message
codecademy课程笔记——JavaScript Promise的更多相关文章
- JavaScript:学习笔记(9)——Promise对象
JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...
- Javascript Promise 学习笔记
1. 定义:Promise是抽象异步处理对象以及对其进行各种操作的组件,它把异步处理对象和异步处理规则采用统一的接口进行规范化. 2. ES6 Promises 标准中定义的API: ...
- JavaScript笔记 #06# Promise简单例子
索引 回调版本 Promise版本1 Promise版本2 Notes 参考资料: Promise JavaScript Promise:简介 你去书店借书,按照异步的套路,剧情如下↓ 你:“老板,有 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- SpringMVC框架 课程笔记
SpringMVC框架 课程笔记 第0章 SpringMVC框架的核心内容 1.SpringMVC 概述 2.SpringMVC 的 HelloWorld 3.使用 @RequestMapping 映 ...
- Linux内核分析课程笔记(一)
linux内核分析课程笔记(一) 冯诺依曼体系结构 冯诺依曼体系结构实际上就是存储程序计算机. 从两个层面来讲: 从硬件的角度来看,冯诺依曼体系结构逻辑上可以抽象成CPU和内存,通过总线相连.CPU上 ...
- (1/18)重学Standford_iOS7开发_iOS概述_课程笔记
写在前面:上次学习课程对iOS还是一知半解,由于缺乏实践,看公开课的视频有时不能很好地领会知识.带着问题去学习永远是最好的方法,接触一段时间iOS开发以后再来看斯坦福iOS公开课,又会有许多新的发现, ...
- RX编程笔记——JavaScript 获取地理位置
RX编程笔记——JavaScript 获取地理位置 2016-07-05
- [Javascript] Promise
Promise 代表着一个异步操作,这个异步操作现在尚未完成,但在将来某刻会被完成. Promise 有三种状态 pending : 初始的状态,尚未知道结果 fulfilled : 代表操作成功 r ...
随机推荐
- 第十一节: EF的三种模式(一) 之 DBFirst模式(SQLServer和MySQL两套方案)
一. 简介 EF连接数据库有三种模式,分别是DBFirst.ModelFirst.CodeFirst,分别适用于不同的开发场景. 该章节,将主要介绍EF的DBFirst连接SQLServer数据库和M ...
- [物理学与PDEs]第2章第1节 理想流体力学方程组 1.4 一维理想流体力学方程组
1. 一维理想流体力学方程组 $$\beex \bea \cfrac{\p\rho}{\p t}+\cfrac{\p}{\p x}(\rho u)&=0,\\ \cfrac{\p}{\p t ...
- EffectiveC++ 第5章 实现
我根据自己的理解,对原文的精华部分进行了提炼,并在一些难以理解的地方加上了自己的"可能比较准确"的「翻译」. Chapter 5 实现 Implementations 适当提出属于 ...
- luogu P5294 [HNOI2019]序列
传送门 这个什么鬼证明直接看uoj的题解吧根本不会证明 首先方案一定是若干段等值的\(B\),然后对于一段,\(B\)的值应该是\(A\)的平均值.这个最优方案是可以线性构造的,也就是维护以区间平均值 ...
- Linux的vim编辑器中的翻页命令
当我们进入Linux的vim编辑器查看脚本时,按上下键查看是不是非常慢?这个时候就要用到我们的翻页快捷键了,快捷键命令如: 整页翻页命令为:Ctrl + f 键 f 的英文全拼为:forward: ...
- 抓包工具tcpdump用法说明
tcpdump采用命令行方式对接口的数据包进行筛选抓取,其丰富特性表现在灵活的表达式上. 不带任何选项的tcpdump,默认会抓取第一个网络接口,且只有将tcpdump进程终止才会停止抓包. 例如: ...
- ubuntu16.04降级内核版本至3.13.0-85
1.前言 采用ubuntu16.04在编译实验课程的实例代码simplefs 时,发现编译时报如下错误: 因此需要将ubuntu16.04的内核版本降级为 3.13.0-85-generic 2.修改 ...
- 【原创】大数据基础之Oozie(3)Oozie从4.3升级到5.0
官方文档如下: http://oozie.apache.org/docs/5.0.0/AG_OozieUpgrade.html 这里写的比较简单,大概过程如下:1 下载5.0代码并编译:2 解压5.0 ...
- TCP 的那些事儿
TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身是个比较痛苦的过程,但对于学习的过程却能让人有很多收获.关于TCP这个协议的细节,我还是推荐你去 ...
- PID控制器开发笔记之十三:单神经元PID控制器的实现
神经网络是模拟人脑思维方式的数学模型.神经网络是智能控制的一个重要分支,人们针对控制过程提供了各种实现方式,在本节我们主要讨论一下采用单神经元实现PID控制器的方式. 1.单神经元的基本原理 单神经元 ...