学习 javascript Promise 部分 什么是 Promise?

深入浅出 javascript promise:第一部分——promise 的本质

大家好,JavaScript 爱好者们!今天,我们将一起探索 JavaScript 中的 Promise,并学习如何更好地理解和使用它。很多人觉得 Promise 复杂难懂,其实不然,只要多加练习,你就能轻松掌握!本文将帮助你理解 Promise 的基础知识,了解其本质以及为何我们需要它。

Promise 是什么?为什么 JavaScript 需要它?

想象一下,你承诺每天早上锻炼,并告知朋友你的锻炼结果。你的承诺本身不会影响你和朋友的生活,朋友只是等待你的通知(承诺成功或失败),以便做出相应的判断或行动。

这个例子阐述了 Promise 作为事件的本质,以及事件连接的两个参与者:消费者(你的朋友)和生产者(你):

学习 javascript Promise 部分 什么是 Promise?

立即学习“Java免费学习笔记(深入)”;

简而言之,JavaScript 中的 Promise 对象具有类似的行为。它允许我们在不阻塞主线程的情况下执行异步任务,并在任务完成后通知订阅者。

让我们通过一个例子来理解 Promise 的使用方法:

学习 javascript Promise 部分 什么是 Promise?

代码解读:

我们使用执行器函数创建一个 Promise 实例(传递给 Promise 构造函数的函数)。执行器函数在 Promise 创建时立即执行。

执行器函数有两个参数:resolve 方法和 reject 方法。这两个方法用于在异步操作完成后完成 Promise。

例如,我们承诺一周内每天早上锻炼。Promise 将持续一周。如果第三天你没有完成锻炼,你可以调用 reject 方法,所有订阅了该 Promise 的人都将收到通知。反之,如果完成了一周的锻炼,你可以在第七天调用 resolve 方法,通知朋友你已成功履行承诺。消费者(你的朋友)无需关心你何时告知结果,他们只需要在收到结果时处理即可。

下图展示了 Promise 的三种状态:“pending”(进行中)、“fulfilled”(已完成)和“rejected”(已拒绝)。Promise 初始状态为“pending”,完成后则变为“fulfilled”或“rejected”,取决于调用了哪个方法。

学习 javascript Promise 部分 什么是 Promise?

需要注意的是,Promise 执行器只能完成一次,后续对 resolve 或 reject 的调用将被忽略。

当你完成 Promise(调用 resolve 或 reject)时,所有订阅者都将收到包含有效负载的通知,可以通过 Promise 实例的两个特殊方法访问:Promise.prototype.then 和 Promise.prototype.catch。

学习 javascript Promise 部分 什么是 Promise?

Promise.prototype.then 方法可以同时处理成功和失败的情况,因为它接受两个回调函数。

Promise.prototype.catch 方法仅处理失败的情况:

学习 javascript Promise 部分 什么是 Promise?

Promise.prototype.then 用于处理成功的情况。

此外,Promise.prototype.finally 方法用于执行无论结果如何都应该执行的代码:

学习 javascript Promise 部分 什么是 Promise?

该方法不执行任何操作不返回任何内容,主要用于一些收尾工作,例如向用户显示消息或隐藏加载程序。

接下来,我们来看一个从 API 请求数据、将其转换为 JSON 并输出到控制台的实际例子:

学习 javascript Promise 部分 什么是 Promise?

你会发现,实际应用与我们之前的例子并无太大区别。但需要注意以下几点:

每个 Promise.prototype.then 和 Promise.prototype.catch 处理程序的结果都会传递到下一个处理程序。Response.json 方法返回一个 Promise,该 Promise 在执行后返回 JSON 数据,并传递给下一个处理程序。Promise.prototype.finally 处理程序会将前一个响应传递到下一个响应。

至此,你应该对 Promise 的基础知识有了更深入的理解,包括其使用方法和状态。

总结:

JavaScript Promise 是一个特殊的对象,用于执行异步操作并在完成时通知消费者。Promise 实例有三种状态:“pending”、“fulfilled”和“rejected”。Promise 实例有三个主要方法:“then”、“catch”和“finally”。Promise.prototype.then 用于处理成功和失败的结果。Promise.prototype.catch 用于处理失败的结果。Promise.prototype.finally 用于执行一些清理工作。可以按任意顺序链接处理程序,它们将按顺序执行。前一个 Promise 的结果会传递到下一个 Promise,为了使 Promise 链可扩展,除了“finally”处理程序外,其他处理程序必须返回一个 Promise。

在接下来的文章中,我们将探讨更高级的 Promise 技术,敬请期待!

以上就是学习 javascript Promise 部分 什么是 Promise?的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2643652.html

(0)
上一篇 2025年3月7日 07:05:32
下一篇 2025年3月7日 07:05:41

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 停止使用 React

    我曾经以为自己精通react,但现在只想让它从我的开发生涯中消失。原因如下: 速度缓慢: 图片来自:蒂姆·卡德莱克 超过53%的移动用户无法忍受加载时间超过3秒的网站。每增加一秒加载时间,就会流失10%的用户。性能直接影响用户体验。 更多信…

    2025年3月7日
    000
  • TypeScript 面试问题

    TypeScript 面试宝典:核心概念与实用技巧 本文涵盖了typescript的核心概念和实用技巧,旨在帮助你更好地应对typescript面试。 一、TypeScript概述 TypeScript是JavaScript的超集,它添加了…

    2025年3月7日
    200
  • 使用此命令在您的 Vite 项目中设置 Tailwind

    只需一个命令,即可轻松在您的 Vite 项目中配置 Tailwind CSS!通常,配置 Tailwind 需要安装、生成配置文件并添加模板等多个步骤。但现在,您可以使用 lazywind npm 包简化这个过程。 安装和使用: 全局安装 …

    2025年3月7日
    200
  • JavaScript 中的语句 VS 表达式

    JavaScript 中的语句和表达式:深入理解核心差异 在 JavaScript 开发中,”语句”和”表达式”这两个术语经常出现,初学者往往容易混淆。虽然它们看起来相似,但理解其根本区别对于…

    2025年3月7日
    200
  • 轨道:太阳系之旅

    去年十月,Masons团队参与了2024年NASA Space Apps Cairo黑客马拉松,并开发了一个令人振奋的项目——Orbit。Orbit是一个交互式3D网页应用,能够模拟太阳系并追踪近地天体(NEO)。它基于Next.js、Th…

    2025年3月7日
    200
  • 适合初学者的简单 HTML、CSS 和 JavaScript 项目

    十一款HTML、CSS和JavaScript入门级项目推荐 以下列举的11个项目,非常适合HTML、CSS和JavaScript初学者练习和学习: 趣味问答应用: 使用HTML、CSS和JavaScript构建的在线问答游戏。项目链接:ht…

    2025年3月7日
    200
  • React 与 React 性能改进和迁移指南

    React 19 正式发布,为这个流行的 JavaScript 库带来了显著的性能提升和新特性。本文将深入探讨 React 19 与 React 18 的主要性能差异,分析迁移的必要性,并重点讲解一些重要变更。 React 19 的性能改进…

    2025年3月7日
    200
  • 课程计划:使用 JavaScript 和 Nodejs 进行人工智能驱动的电子商务开发 [草案]

    [课程计划草案,最终课程内容可能会有调整] 课程概述 本课程旨在帮助学员掌握构建人工智能增强型电商平台的实用技能,重点涵盖基于图像的产品搜索、AI客服支持、知识检索、智能推荐以及多语言功能。 课程采用模块化教学,九个模块结合理论讲解和实践项…

    2025年3月7日
    200
  • JavaScript 中“new”关键字的作用是什么?

    让我们深入探讨JavaScript中的new关键字。它使构造函数能够创建新的对象实例,但这背后究竟发生了什么? 首先,new运算符创建一个空对象。想象一下,一个等待填充属性和方法的空白画布。 其次,这个空对象与构造函数的原型对象关联。这就好…

    2025年3月7日
    200
  • 了解 JavaScript 不变性和引用类型

    JavaScript 中的不变性和引用类型行为是基础概念,但容易被误解。不变性确保数据稳定性,而理解引用类型对于避免意外副作用至关重要。本文深入探讨这些概念,并提供高级示例和实用函数,帮助您高效利用它们。 JavaScript 中的不变性 …

    2025年3月7日
    200

发表回复

登录后才能评论