首页 web前端 js教程 学习 javascript 承诺。部分 什么是承诺?

学习 javascript 承诺。部分 什么是承诺?

Jan 03, 2025 pm 10:33 PM

学习 javascript 承诺。第 1 部分 — 什么是承诺?

嘿,JavaScript 粉丝们,今天我将向您介绍 Promise 以及如何更好地学习或理解它们。很多人认为这是一个复杂的话题,对此感到困惑,尽管这没有什么棘手的,如果你经常练习,你会成为专家,我保证。我今天的任务是帮助您理解基础知识,并展示 Promise 的本质以及为什么我们需要它们。

什么是 Promise,为什么在 JavaScript 中需要它?

想象一下,您已向朋友保证每天早上都会坚持锻炼,如果您这样做了,请通知他们。你的承诺并不妨碍你或你的朋友过他们的生活,他们只是在等待你关于承诺成功或失败的通知,以便对你做出结论或采取行动。

这个小例子说明了 Promise 作为事件的本质以及通过该事件连接的两个参与者:在本例中,是消费者(你的朋友)和生产者(你):

Learn javascript promises. Part  What is a promise?

如果我们稍微简化一下,我们可以说在 javascript 中我们看到了与 Promise 类相同的行为,它使我们能够在不阻塞 javascript 主线程的情况下执行异步任务,并在完成时通知订阅者我们的承诺。

让我们举个例子来了解如何使用它:

Learn javascript promises. Part  What is a promise?

让我们按顺序回顾一下这段代码:

  1. 我们使用执行器函数创建一个promise实例(这是我们传递给Promise类构造函数的函数)。

执行器函数是promise的基础,这个函数在promise创建时立即被调用。

执行器函数有两个位置参数,第一个是resolve方法,第二个是reject方法。这两种方法都负责在一段时间内完成 Promise。

例如,我们承诺一周每天早上起床锻炼身体。在这种情况下,我们的 Promise 会持续一整周,如果你在第 3 天无法兑现,你可以调用拒绝方法,每个订阅你 Promise 的人都会知道这一点。反之亦然,如果你遵守了你的承诺,那么在第 7 天你将调用resolve方法,该方法将通知你的朋友你已经成功地遵守了你的承诺。所以你可以看到,消费者(你的朋友)完全独立于你何时告诉他们结果,他们只需要确保当他们告诉他们结果时,他们就能得到结果。

下图显示了可能的 Promise 状态,它们是“pending”、“fulfilled”和“rejected”。当一个 Promise 刚刚发起时,它的状态是“pending”。完成后,它要么“已完成”,要么“被拒绝”,具体取决于调用哪个方法来完成它。

Learn javascript promises. Part  What is a promise?

还值得注意的是,一个 Promise 执行器不能完成多次,所有后续对resolve或reject方法的调用都将被忽略。

  1. 当你说你完成了你的promise(通过调用resolve或reject)方法时,所有订阅了promise的人都会收到一条带有有效负载的通知,可以在promise实例的两个特殊方法中检索该通知。这些方法是: Promise.prototype.then 和 Promise.prototype.catch

Learn javascript promises. Part  What is a promise?

使用 Promise.prototype.then 方法,您可以同时处理正面和负面场景,因为该函数接受两个回调,如上面的屏幕截图所示。

使用 Promise.prototype.catch 你只能处理像这样的负面场景:

Learn javascript promises. Part  What is a promise?

并保留 Promise.prototype.then 以获得积极的场景。

此外,promise 还提供了一种方法,您可以使用该方法来执行无论结果如何都应该执行的代码。这个方法就是Promise.prototype.finally:

Learn javascript promises. Part  What is a promise?

此方法不执行任何操作并且不返回任何内容,因为它旨在完成或清理以前的操作。例如,向用户显示消息或隐藏加载程序。

太好了,至此,我们已经介绍了 Promise 的基础知识,所以我建议我们继续看一个实际示例,例如从 API 请求数据,将其从原始 HTTP 响应转换为 JSON,然后输出到控制台:

Learn javascript promises. Part  What is a promise?

正如你所看到的,在现实世界中使用它的结果与我们在文章开头练习的技能没有太大区别。但是,您可能仍然注意到了一些新的事情:

  • 之前每个 Promise.prototype.then 和 Promise.prototype.catch 处理程序的结果都会传递到下一个 Promise 处理程序。值得一提的是,Response.json 方法返回一个 Promise,该 Promise 在执行时将返回一个 JSON,并调用以下处理程序将该 JSON 传递给它。

  • 就 Promise.prototype.finally 而言,它是一个“隐形”处理程序,你可以说它将前一个响应通过自身传递到下一个响应。

太棒了,我相信现在您已经更好地理解了 Promise 是什么、如何使用它以及它可以有什么状态。另外,我想在下面列出我们今天讨论的要点(备忘单):

概括:

  • Javascript Promise — 它是一个特殊的对象,允许您执行异步操作并在完成时通知消费者

  • Promise 实例可以有 3 种状态——“pending”、“fulfilled”和“rejected”

  • Promise 实例有 3 个主要方法——“then”、“catch”和“finally”。

  • Promise.prototype.then — 旨在处理拒绝和成功结果

  • Promise.prototype.catch — 旨在处理拒绝的结果

  • Promise.prototype.finally — 旨在进行一些清理工作

  • 您可以按照您想要的任何顺序链接处理程序,它们将按顺序执行

  • 前一个 Promise 的结果会进入下一个 Promise,因此为了使 Promise 链可扩展,您必须记住每次都从处理程序返回一个 Promise,除了“finally”处理程序。

在本主题的后续部分中,我们将介绍更高级的 Promise 技术并深入研究其功能,因此请订阅、点赞并保持关注!

以上是学习 javascript 承诺。部分 什么是承诺?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

如何实现视差滚动和元素动画效果,像资生堂官网那样?
或者:
怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? 如何实现视差滚动和元素动画效果,像资生堂官网那样? 或者: 怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript难以学习吗? JavaScript难以学习吗? Apr 03, 2025 am 12:20 AM

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

JavaScript的演变:当前的趋势和未来前景 JavaScript的演变:当前的趋势和未来前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

Zustand异步操作:如何确保useStore获取的最新状态? Zustand异步操作:如何确保useStore获取的最新状态? Apr 04, 2025 pm 02:09 PM

zustand异步操作中的数据更新问题在使用zustand状态管理库时,经常会遇到异步操作导致数据更新不及时的问题。�...

See all articles