通过现实生活中一个例子来理解 JavaScript Promise

简介: 您承诺在它出版时将其发送给这些粉丝。歌手给粉丝提供一份名单。他们可以填写他们的电子邮件地址,这样当歌曲可用时,所有订阅方都会立即收到它。即使出现了非常大的问题,比如工作室发生火灾,导致歌曲无法发布,他们仍然会收到通知。
+关注继续查看

想象一下,你是一位顶级歌手,粉丝们日夜询问你即将到来的歌曲。


您承诺在它出版时将其发送给这些粉丝。歌手给粉丝提供一份名单。他们可以填写他们的电子邮件地址,这样当歌曲可用时,所有订阅方都会立即收到它。即使出现了非常大的问题,比如工作室发生火灾,导致歌曲无法发布,他们仍然会收到通知。


这就是我们在编程中经常遇到的事情的现实类比。


做某事并需要时间的“生产代码”。例如,一些通过网络加载数据的代码。这就是“歌手”。


一个“消费代码”,期望消费“生产代码”产生的结果。许多函数可能需要该结果。这些是“粉丝”。


Promise 是一个特殊的 JavaScript 对象,它将生产代码和消费代码链接在一起。根据我们的类比:这是“订阅列表”。 “生产代码”花费它需要的任何时间来产生承诺的结果,并且“承诺”使该结果在准备好时可供所有订阅的代码使用。


let promise = new Promise(function(resolve, reject) {
  // executor (the producing code, "singer")
});


传递给 new Promise 的函数称为执行器。 当新的 Promise 被创建时,executor 会自动运行。 它包含最终应该产生结果的生产代码。 按照上面的类比:执行者是“歌手”。


它的参数 resolve 和 reject 是 JavaScript 本身提供的回调。 这是两个原生对象。


我们的代码只在执行器内部。


当 executor 获得结果时,无论是早是晚,都没有关系,它应该调用以下回调之一:


  • resolve(value) — 如果作业成功完成,带有结果值。


  • reject(error) — 如果发生错误,error 是错误对象。

总结一下:执行器自动运行并尝试执行一项工作。 尝试完成后,如果成功则调用 resolve,如果出现错误则调用 reject。


image


新的 Promise 构造函数返回的 Promise 对象具有以下内部属性:


  • state — 最初是“pending”,然后在调用 resolve 时更改为“fulfilled”,或者在调用 reject 时更改为“rejected”。


  • 结果 - 最初未定义,然后在调用 resolve(value) 时更改为 value,或者在调用 reject(error) 时更改为错误。




相关文章
|
1月前
|
存储 移动开发 前端开发
JS中的异步编程与Promise
JS中的异步编程与Promise
35 0
|
2月前
|
前端开发 JavaScript
JavaScript学习 -- Promise的使用
JavaScript学习 -- Promise的使用
12 0
|
2月前
|
前端开发 JavaScript
JS中Promise详解
JS中Promise详解
|
2月前
|
设计模式 JSON 前端开发
前端面试必看(手写Promise+js设计模式+继承+函数柯里化等)JavaScript面试全通关(1/3)
前端面试必看(手写Promise+js设计模式+继承+函数柯里化等)JavaScript面试全通关(1/3)
18 0
|
2月前
|
存储 移动开发 JavaScript
带你读《现代Javascript高级教程》二十六、JS中的异步编程与Promise(1)
带你读《现代Javascript高级教程》二十六、JS中的异步编程与Promise(1)
|
2月前
|
前端开发 JavaScript
带你读《现代Javascript高级教程》二十六、JS中的异步编程与Promise(2)
带你读《现代Javascript高级教程》二十六、JS中的异步编程与Promise(2)
|
2月前
|
存储 前端开发 JavaScript
带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(1)
带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(1)
|
2月前
|
前端开发 JavaScript
带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(2)
带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(2)
|
2月前
|
前端开发 JavaScript
带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(3)
带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(3)
|
2月前
|
资源调度 前端开发 JavaScript
带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(4)
带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(4)
相关产品
云迁移中心
推荐文章
更多