首页 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)

热门话题

Java教程
1664
14
CakePHP 教程
1422
52
Laravel 教程
1316
25
PHP教程
1267
29
C# 教程
1239
24
神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

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

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

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

JavaScript引擎:比较实施 JavaScript引擎:比较实施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

Python vs. JavaScript:学习曲线和易用性 Python vs. JavaScript:学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

JavaScript:探索网络语言的多功能性 JavaScript:探索网络语言的多功能性 Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

如何使用Next.js(前端集成)构建多租户SaaS应用程序 如何使用Next.js(前端集成)构建多租户SaaS应用程序 Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

使用Next.js(后端集成)构建多租户SaaS应用程序 使用Next.js(后端集成)构建多租户SaaS应用程序 Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序(一个Edtech应用程序),您可以做同样的事情。 首先,什么是多租户SaaS应用程序? 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

从C/C到JavaScript:所有工作方式 从C/C到JavaScript:所有工作方式 Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

See all articles