Promise是一种表示异步操作最终的结果的对象,一个Promise对象有三种状态
Pending: 初始状态 ,操作还未完成
Fullfilled:操作成功完成,且这个promise现在有一个resolved value
Rejected: 操作失败
promise 最终状态都是 settled: fulfilled or rejected
 构造一个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

转载于:https://www.cnblogs.com/xiyouchen/p/10284470.html

codecademy课程笔记——JavaScript Promise相关推荐

  1. JavaScript:学习笔记(9)——Promise对象

    JavaScript:学习笔记(9)--Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...

  2. 跟我学《JavaScript高程3》第一讲,视频课程,课程笔记

    跟我学<JavaScript高程3> 第一讲:第1~3章 课程制作:bling,兴哥,5年Java,3年前端 课程知识:JavaScript.Html.Css 课程目标:前端体系课程,逐步 ...

  3. 前端面试 | JavaScript知识点 | 课程笔记

    前端面试课程笔记 以上方链接内课程内容为主,知识点可能不全面,仅作为自用备忘 Ch3 作用域和闭包 3.1 作用域和自由变量 题目: this的不同应用场景,如何取值? 手写bind函数 实际开发中闭 ...

  4. python嵩天课堂笔记_嵩天python课程笔记1

    嵩天python课程笔记 -.计算机知识 1.概念:计算机是根据指令操作数据的设备. 2.功能性:对数据的操作,数据输入输出计算处理及结果储存. 3.可编程性:根据一系列指令,自动地.可预测地.准确地 ...

  5. 移动互联网开发课程笔记

    移动互联网开发课程笔记 文章目录 移动互联网开发课程笔记 一.api是什么? 二.JSON格式 1.什么是JSON? 2.JSON语法格式 三.HBuilder X代码片怎么插入 四.uni-list ...

  6. 斯坦福大学李飞飞团队图像分类课程笔记

    斯坦福大学李飞飞团队图像分类课程笔记 Stanford image classification course notes 这是斯坦福CS231n课程图像分类基础知识. 目标:这一节先介绍图像分类基本 ...

  7. Udacity机器人软件工程师课程笔记(五)-样本搜索和找回-基于漫游者号模拟器-自主驾驶

    9.自主驾驶 在接下来的环节中,我们要实现漫游者号的自动驾驶功能. 完成这个功能我们需要四个程序,第一个为感知程序,其对摄像头输入的图片进行变换处理和坐标变换使用.第二个程序为决策程序,功能是帮助漫游 ...

  8. 这份深度学习课程笔记获吴恩达点赞

    来源:机器之心 本文共7470字,建议阅读8分钟. 通过本文用优美的信息图为大家解读深度学习课程的知识与亮点~ 吴恩达在推特上展示了一份由 TessFerrandez 完成的深度学习专项课程信息图,这 ...

  9. Yann Lecun纽约大学《深度学习》2020课程笔记中文版,干货满满!

    关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! [导读]Yann Lecun在纽约大学开设的2020春季<深度学习>课 ...

  10. 超级干货丨优美的课程笔记,吴恩达点赞的深度学习课程信息图

    吴恩达在推特上展示了一份由 TessFerrandez 完成的深度学习专项课程信息图,这套信息图优美地记录了深度学习课程的知识与亮点.因此它不仅仅适合初学者了解深度学习,还适合机器学习从业者和研究者复 ...

最新文章

  1. iOS: 零误差或极小误差的定时执行或延迟执行?
  2. CentOS的阿里YUM源安装
  3. elasticsearch:7.9.3 docker 开启日志
  4. findbugs插件_提升编码效率的IntelliJ IDEA必备插件
  5. 形而上者谓之道,形而下者谓之器
  6. c语言算ex自定义函数,用C语言写定积分的通用函数:sin(x),cos(x),eX.
  7. 使用Dom4j读取指定文件,并写入指定文件
  8. 使用go制作微服务数据计算
  9. Mysql 中将blob类型转换成varchar类型
  10. com.android.dx.cf.iface.ParseException: bad class file magic (cafebabe) or version (0034.0000)
  11. 无人机倾斜摄影技术在三维实景GIS的应用
  12. 小程序ibeacon三点定位
  13. H264 无损压缩及编解码流程
  14. 《关于TCP SYN包的超时与重传》——那些你应该知道的知识(四)
  15. 他人的建议和意见对自已做决定的影响
  16. python的运行过程_python执行流程
  17. 浮点数单双精度输出位数
  18. 【LeetCode 1125】 Smallest Sufficient Team
  19. 让源代码成为开发者最宝贵的财富
  20. 东南大学计算机专业排名2018,2018东南大学排名多少位 东南大学优势专业排名

热门文章

  1. Crazy Mother
  2. MacOS 系统安装超详细教程
  3. 几款比较有名的刷流量软件
  4. ios怎么更新测试软件,苹果iOS13 beta3测试版升级教程 iOS13 beta3更新方法
  5. 支持自动识别快递公司批量查询物流、一键导出
  6. 企业微信机器人读取服务器,用企业微信机器人搞事情
  7. 什么是Web2.0(图解Web2.0)
  8. TOGAF认证考试总结
  9. InnoDB Adaptive Hash Index(AHI)
  10. 小学计算机无生试讲教案,小学数学无生试讲教案(9页)-原创力文档