题目

非常好。我们刚刚看到了回调函数在处理多个异步操作时会变得多么混乱（回调地狱）。为了解决这个问题，现代 JavaScript 提供了一个更强大、更优雅的工具：Promise。

Promise，正如其名，是一个“承诺”。它代表一个尚未完成但最终会完成（或失败）的异步操作的结果。你可以把它想象成一张“凭证”，你拿着这张凭证，未来可以凭它兑换最终的数据，或者得到一个失败的通知。

练习 04: Promise - 告别回调地狱

这次，我们重构上一个练习的 fetchUserData 函数。它不再接收回调函数作为参数，而是返回一个 Promise。

🎯 学习目标:

  • 理解 Promise 的概念和它的三种状态：pending (进行中)、fulfilled (已成功)、rejected (已失败)。
  • 学会使用 new Promise((resolve, reject) => { ... }) 来创建一个 Promise 对象，并封装一个异步操作。
  • 学会使用 resolve 函数来表示承诺成功兑现，并传递结果。
  • 学会使用 reject 函数来表示承诺未能兑现，并传递原因。
  • 学会使用 .then() 方法来处理成功的结果，使用 .catch() 方法来捕获和处理错误。

🛠️ 任务:

  1. 重新实现 fetchUserData 函数，它现在只接收一个参数 userId。
  2. 这个函数必须返回一个 new Promise 对象。
  3. 在 Promise 的构造函数内部（我们称之为 “executor”），执行我们的异步逻辑：
    • 错误处理: 首先检查 userId。如果它是一个小于或等于 0 的无效值，应立刻调用 reject 函数，并传入一个错误消息字符串，例如 "Invalid User ID"。
    • 异步模拟: 使用 setTimeout 模拟一个 2 秒的网络延迟。
    • 成功处理: 在 2 秒钟后，setTimeout 的回调函数应该调用 resolve 函数，并将模拟的用户数据对象作为参数传给它。
  4. 观察并理解如何使用 .then() 和 .catch() 来消费这个返回 Promise 的函数。

📋 初始代码:
创建新文件 04-promises.js，并复制以下代码。你的任务是补全 fetchUserData 函数的内部逻辑。

console.log("程序开始...");/*** 使用 Promise 模拟从服务器获取用户数据。* @param {number} userId - 要获取的用户的ID。* @returns {Promise<object>} 一个 Promise 对象，成功时会 resolve 用户对象，失败时会 reject 错误信息。*/
function fetchUserData(userId) {return new Promise((resolve, reject) => {// --- 在这里编写你的代码 ---// 1. 检查 userId 是否有效，如果无效，调用 reject。// 2. 使用 setTimeout 模拟网络延迟。// 3. 在 setTimeout 的回调中，调用 resolve 并传入用户数据。});
}// --- 如何使用这个返回 Promise 的新函数 ---// 1. 模拟一次成功的调用
console.log("发起第一次调用 (userId: 123)...");
fetchUserData(123).then((user) => {// 当 Promise 成功时 (resolve被调用)，这部分代码会执行console.log("成功获取到用户(123):", user);}).catch((error) => {// 当 Promise 失败时 (reject被调用)，这部分代码会执行console.error("获取用户(123)失败:", error);});// 2. 模拟一次失败的调用
console.log("发起第二次调用 (userId: -1)...");
fetchUserData(-1).then((user) => {console.log("成功获取到用户(-1):", user);}).catch((error) => {console.error("获取用户(-1)失败:", error);});console.log("Promise 已发出，代码继续执行，等待结果...");

✅ 预期输出:
观察输出的顺序非常重要！

程序开始...
发起第一次调用 (userId: 123)...
发起第二次调用 (userId: -1)...
Promise 已发出，代码继续执行，等待结果...
获取用户(-1)失败: Invalid User ID  // 这条会很快出现，因为它没有进入setTimeout
// ...等待大约2秒...
成功获取到用户(123): { id: 123, name: 'John Doe', email: 'john.doe@example.com' } // 这条在2秒后出现

这个练习将清晰地展示 Promise 如何将“结果”与“处理结果的逻辑”分离开来，并提供了统一的错误处理机制，这正是它比回调函数更优秀的地方。开始吧！

答案

当然，我们来揭晓答案，并深入解析 Promise 的工作机制。这是异步编程从入门到熟练的关键一步。

参考实现 (04-promises.js)

console.log("程序开始...");/*** 使用 Promise 模拟从服务器获取用户数据。* @param {number} userId - 要获取的用户的ID。* @returns {Promise<object>} 一个 Promise 对象，成功时会 resolve 用户对象，失败时会 reject 错误信息。*/
function fetchUserData(userId) {// 返回一个新的 Promise 实例return new Promise((resolve, reject) => {// 1. 检查 userId 是否有效。这是同步代码，会立刻执行。if (userId <= 0) {// 如果无效，我们立刻调用 reject 来表示 Promise 失败。// Promise 的状态从 pending 变为 rejected。reject("Invalid User ID");return; // 调用 reject 后最好 return，以防止后续代码意外执行。}// 2. 使用 setTimeout 模拟异步操作setTimeout(() => {// 这部分代码会在 2 秒后执行// 模拟成功获取数据const user = {id: userId,name: 'John Doe',email: 'john.doe@example.com'};// 调用 resolve 表示 Promise 成功完成。// Promise 的状态从 pending 变为 fulfilled。// user 对象会作为成功的结果被传递出去。resolve(user);}, 2000);});
}// --- 如何使用这个返回 Promise 的新函数 ---// 1. 模拟一次成功的调用
console.log("发起第一次调用 (userId: 123)...");
fetchUserData(123).then((user) => {console.log("成功获取到用户(123):", user);}).catch((error) => {console.error("获取用户(123)失败:", error);});// 2. 模拟一次失败的调用
console.log("发起第二次调用 (userId: -1)...");
fetchUserData(-1).then((user) => {console.log("成功获取到用户(-1):", user);}).catch((error) => {console.error("获取用户(-1)失败:", error);});console.log("Promise 已发出，代码继续执行，等待结果...");

代码解析：Promise 的生命周期

让我们分别追踪“成功”和“失败”这两次调用的完整旅程。

A. 成功的旅程 (fetchUserData(123))
  1. 创建: 调用 fetchUserData(123)，一个新的 Promise 对象被立刻创建并返回。此时，它的内部状态是 pending (进行中)。
  2. 执行: Promise 构造函数里的代码开始执行。userId (123) > 0，所以 if 判断不成立。
  3. 等待: setTimeout 被设置。程序继续向下执行，打印出 “Promise 已发出…”。主线程现在空闲了，等待 2 秒。
  4. 成功 (Fulfill): 2 秒后，setTimeout 的回调触发。user 对象被创建，然后 resolve(user) 被调用。
  5. 状态变更: resolve() 的调用，使 Promise 的状态从 pending 变为 fulfilled (已成功)。user 对象作为成功的结果被“封装”起来。
  6. 触发 .then: Promise 状态的改变会自动触发链接在它上面的 .then() 方法。user 对象被作为参数传递给 .then() 内部的那个箭头函数。
  7. 结果: 控制台打印出 成功获取到用户(123): ...。
B. 失败的旅程 (fetchUserData(-1))
  1. 创建: 调用 fetchUserData(-1)，另一个新的 pending 状态的 Promise 对象被创建并返回。
  2. 执行: Promise 构造函数里的代码开始执行。userId (-1) <= 0，if 判断成立。
  3. 失败 (Reject): reject("Invalid User ID") 被立刻调用。
  4. 状态变更: reject() 的调用，使 Promise 的状态从 pending 变为 rejected (已失败)。错误消息 "Invalid User ID" 作为失败的原因被“封装”起来。
  5. 触发 .catch: Promise 状态的改变会自动触发链接在它上面的 .catch() 方法（它会跳过所有 .then）。错误消息被作为参数传递给 .catch() 内部的箭头函数。
  6. 结果: 控制台打印出 获取用户(-1)失败: Invalid User ID。因为这个过程是同步的（没有 setTimeout），所以这个结果会很快出现。

Promise 解决了什么？

现在我们可以回答，为什么 Promise 比回调函数好。

  1. 统一的接口: 无论成功还是失败，你都与同一个 Promise 对象打交道，使用 .then() 和 .catch() 这两个标准方法来处理，代码结构清晰。

  2. 避免回调地狱: Promise 的核心优势在于链式调用 (Chaining)。如果我们需要在获取用户后，再获取他的文章，代码会是这样：

    fetchUserData(123).then(user => {// user 获取成功，现在发起获取文章的请求// 假设 fetchUserPosts 也返回一个 Promisereturn fetchUserPosts(user.id); }).then(posts => {// posts 获取成功，现在可以处理文章了console.log("用户的文章:", posts);}).catch(error => {// 任何一步失败，都会被这一个 .catch 捕获！console.error("在处理过程中发生错误:", error);});

    看到了吗？没有层层嵌套，而是一个扁平、线性的链条，非常易于阅读和维护。一个 .catch 就能处理整个链条中任何环节的错误，这是巨大的优势。

虽然 Promise 已经非常强大，但 ES2017 (ES8) 引入了 async/await 语法，它让我们能以一种更像同步代码的、更直观的方式来使用 Promise。这被称为异步编程的“终极形态”，也是我们下一个练习的主题。

准备好后，告诉我，我们就可以开始学习 async/await 了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/87058.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/87058.shtml
英文地址，请注明出处：http://en.pswp.cn/bicheng/87058.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Jenkins初探-通过Docker部署Jenkins并安装插件

Jenkins初探-通过Docker部署Jenkins并安装插件

简介 本文介绍了使用Docker安装Jenkins并进行初始配置的完整流程。主要内容包括&#xff1a; (1)通过docker pull命令获取Jenkins镜像&#xff1b;(2)使用docker run命令启动容器并映射端口&#xff1b;(3)访问Jenkins界面获取初始管理员密码&#xff1b;(4)安装推荐插件并创…
阅读更多...
嵌入式开发：GPIO、UART、SPI、I2C 驱动开发详解与实战案例

嵌入式开发：GPIO、UART、SPI、I2C 驱动开发详解与实战案例

&#x1f4cd; 本文为嵌入式学习系列第二篇&#xff0c;基于 GitHub 开源项目&#xff1a;0voice/EmbeddedSoftwareLearn &#x1f4ac; 作者&#xff1a;0voice &#x1f440; 适合对象&#xff1a;嵌入式初学者、STM32学习者、想搞明白外设驱动开发的C语言学习者 一、驱动是什…
阅读更多...
常用 Linux 命令和 shell 脚本语言整理

常用 Linux 命令和 shell 脚本语言整理

目录 一、Linux 命令大全 1、文件和目录操作 &#xff08;1&#xff09;ls 列出目录内容 &#xff08;2&#xff09;pwd 查看当前目录 &#xff08;3&#xff09;cd 切换目录 &#xff08;4&#xff09;mkdir 创建目录 &#xff08;5&#xff09;cp 复制文件或目录 &…
阅读更多...
YOLOv12_ultralytics-8.3.145_2025_5_27部分代码阅读笔记-autobackend.py

YOLOv12_ultralytics-8.3.145_2025_5_27部分代码阅读笔记-autobackend.py

autobackend.py ultralytics\nn\autobackend.py 目录 autobackend.py 1.所需的库和模块 2.def check_class_names(names: Union[List, Dict]) -> Dict[int, str]: 3.def default_class_names(data: Optional[Union[str, Path]] None) -> Dict[int, str]: 4.cla…
阅读更多...
【MySQL基础】MySQL索引全面解析：从原理到实践

【MySQL基础】MySQL索引全面解析：从原理到实践

MySQL学习&#xff1a; https://blog.csdn.net/2301_80220607/category_12971838.html?spm1001.2014.3001.5482 前言&#xff1a; 在前面我们基本上已经把MySQL的基础知识都进行了学习&#xff0c;但是我们之前处理的数据都是十分少的&#xff0c;但是如果当我们的数据量很大…
阅读更多...
第三十五章 I2S——音频传输接口

第三十五章 I2S——音频传输接口

第三十五章 I2S——音频传输接口 目录 第三十五章 I2S——音频传输接口 1 I2S概述 1.1 简介 1.2 功能特点 1.3 工作原理 1.4 利用DMA通信的I2S 1.4.1 I2S配合DMA通信工作原理 1.4.2 配置要点 2 应用场景 2.1 消费类音频设备 2.2 专业音频设备 2.3 通信设备 2.4 汽车电子 2.5 嵌…
阅读更多...
产品-Figma（英文版），图像的布尔类型图例说明

产品-Figma（英文版），图像的布尔类型图例说明

文章目录 Union SelectionSubtract SelectionIntersect SelectionExclude SelectionFlatten Selection Union Selection 把多个形状合并成一个新的完整形状&#xff0c;保留所有外部轮廓&#xff0c;内部不被切割。由于红色的长方形在外面的一层&#xff0c;所以切割后&#x…
阅读更多...
Windows CMD命令分类大全

Windows CMD命令分类大全

⚙️ ‌一、系统与磁盘管理‌ ‌系统信息‌ systeminfo&#xff1a;查看详细硬件及系统配置&#xff08;版本/内存/补丁&#xff09;211 winver&#xff1a;快速检查Windows版本11 msinfo32&#xff1a;图形化系统信息面板811‌磁盘工具‌ chkdsk /f&#xff1a;修复磁盘错误&…
阅读更多...
【Dify系列】【Dify1.4.2 升级到Dify1.5.0】

【Dify系列】【Dify1.4.2 升级到Dify1.5.0】

1. 升级前准备工作 1.1 数据备份&#xff1a; 进入原安装包 docker 目录&#xff0c;备份“volumes”文件夹&#xff0c;此文件夹包含了 Dify 数据库数据&#xff1a; rootjoe:/usr/local/dify/docker/volumes# pwd /usr/local/dify/docker/volumesrootjoe:/usr/local/dify/…
阅读更多...
DeepSeek网页版随机点名器

DeepSeek网页版随机点名器

用DeepSeek帮我们生成了一个基于html5的随机点名器&#xff0c;效果非常棒&#xff0c;如果需要加入名字&#xff0c;请在代码中按照对应的格式添加即可。 提示词prompt 帮我生成一个随机点名的HTML5页面 生成真实一点的名字数据 点击随机按钮开始随机选择 要有闪动的效果 &…
阅读更多...
前后端分离实战2----后端

前后端分离实战2----后端

戳我抵达前端 项目描述&#xff1a;用Vscode创建Spring Bootmybatis项目&#xff0c;用maven进行管理。创建一个User表&#xff0c;对其内容进行表的基本操作&#xff08;增删改查&#xff09;&#xff0c;显示在前端。 项目地址&#xff1a;戳我一键下载项目 运行效果如下&…
阅读更多...
深入 ARM-Linux 的系统调用世界

深入 ARM-Linux 的系统调用世界

1、引言 本篇文章以 ARM 架构为例&#xff0c;进行讲解。需要读者有一定的 ARM 架构基础 在操作系统的世界中&#xff0c;系统调用&#xff08;System Call&#xff09;是用户空间与内核空间沟通的桥梁。用户态程序如 ls、cp 或你的 C 程序&#xff0c;无权直接操作硬件、访问文…
阅读更多...
LabVIEW键盘鼠标监测控制

LabVIEW键盘鼠标监测控制

通过Input Device Control VIs&#xff0c;实现对键盘和鼠标活动的监测。通过AcquireInput Data VI 在循环中持续获取输入数据&#xff0c;InitializeKeyboard与InitializeMouse VIs 先获取设备ID 引用&#xff0c;用于循环内监测操作&#xff1b;运行时可输出按键信息&#xf…
阅读更多...
Linux 系统管理：自动化运维与容器化部署

Linux 系统管理：自动化运维与容器化部署

在现代 IT 基础设施中&#xff0c;自动化运维和容器化部署是提高系统管理效率和可维护性的关键。Linux 系统因其稳定性和灵活性而被广泛应用于服务器和数据中心。本文将深入探讨 Linux 系统管理中的自动化运维和容器化部署技术&#xff0c;帮助系统管理员实现高效运维和快速部署…
阅读更多...
直播 APP 开发需要多少成本

直播 APP 开发需要多少成本

直播行业的火爆催生了大量直播 APP 开发需求&#xff0c;而开发成本是开发者最关注的问题之一。其成本构成复杂&#xff0c;受功能需求、开发方式、技术难度等多种因素影响。​ 基础功能开发是成本的重要组成部分。用户注册登录、直播间创建与管理、视频播放、聊天互动等功能开…
阅读更多...
Reactor操作符的共享与复用

Reactor操作符的共享与复用

在 Reactor 中&#xff0c;transform 和 transformDeferred 是两个用于代码复用和操作符链封装的高级操作符。它们允许你将一组操作符封装成一个函数&#xff0c;并在适当的时候应用到响应式流中。以下是它们的详细总结&#xff1a; 1. transform 操作符 作用&#xff1a;tran…
阅读更多...
C#中的Converter详解

C#中的Converter详解

Converter是C#中一个非常有用的概念&#xff0c;主要用于类型转换。它通常以委托或接口的形式出现&#xff0c;允许开发者定义如何将一种类型转换为另一种类型。下面我将详细介绍Converter的概念、使用场景&#xff0c;并以布尔型转换为例展示具体应用。 Converter的基本概念 …
阅读更多...
LabVIEW荧光微管图像模拟

LabVIEW荧光微管图像模拟

利用LabVIEW平台&#xff0c;集成 PI 压电平台、Nikon 荧光显微镜及Andor sCMOS 相机等硬件&#xff0c;构建荧光微管滑行实验图像序列模拟系统。通过程序化模拟微管运动轨迹、荧光标记分布及显微成像过程&#xff0c;为生物医学领域微管跟踪算法测试、运动特性分析提供标准化仿…
阅读更多...
CentOS下Nginx服务器搭建全攻略

CentOS下Nginx服务器搭建全攻略

Nginx 安装与配置完整指南 一、安装 Nginx 1.1 添加 Nginx 官方仓库 在 CentOS 系统中&#xff0c;默认仓库的 Nginx 版本可能较旧&#xff08;通常为 1.12 或更早版本&#xff09;&#xff0c;建议添加官方仓库来安装最新稳定版本&#xff08;目前为 1.25.x&#xff09;&am…
阅读更多...
网络拓扑图绘制全流程：从架构解析到工具实战

网络拓扑图绘制全流程：从架构解析到工具实战

在数据呈现与系统管理中&#xff0c;清晰展示设备间的逻辑关系至关重要。网络拓扑图正是这样一种有效的可视化工具。它通过节点设备和连接线路&#xff0c;直观呈现网络结构或项目流程中各元素的布局与交互关系&#xff0c;帮助理解系统运作、诊断问题并确保项目顺利进行。 1. …
阅读更多...
最新文章

Copyright @ 2022~2023