React编程高级主题:错误处理(Error Handling)
文章目录
- **5.2 错误处理(Error Handling)概述**
- **5.2.1 `onErrorReturn` / `onErrorResume`(错误回退)**
- **1. `onErrorReturn`:提供默认值**
- **2. `onErrorResume`:切换备用数据流**
- **5.2.2 `retry` / `retryWhen`(错误重试)**
- **1. `retry`:固定次数重试**
- **2. `retryWhen`:高级条件重试**
- **5.3 错误处理策略对比**
- **5.4 总结**
- **错误回退(Fallback)**
- **错误重试(Retry)**
- **最佳实践**
5.2 错误处理(Error Handling)概述
在 React + RxJS/Reactive Programming 生态中,数据流(Stream)可能会因 网络错误、API 异常、数据处理失败 等原因抛出错误。如果未正确处理,错误可能导致整个数据流终止,影响用户体验。
错误处理的核心目标:
- 防止错误导致整个应用崩溃(Graceful Degradation)。
- 提供合理的错误恢复机制(Retry/Fallback)。
- 记录错误信息(Logging & Monitoring)。
React 生态中常见的错误处理方式包括:
onErrorReturn
/onErrorResume
(错误回退)retry
/retryWhen
(错误重试)
接下来,我们将深入探讨这些方法的 原理、实现方式及适用场景。
5.2.1 onErrorReturn
/ onErrorResume
(错误回退)
1. onErrorReturn
:提供默认值
核心思想:当数据流发生错误时,返回一个 默认值 替代错误,使流继续执行。
适用场景:
- 适用于 可预测的错误(如 API 404 返回默认数据)。
- 不希望错误中断数据流,但可以接受降级数据。
示例(RxJS):
import { of, throwError } from 'rxjs';
import { onErrorReturn } from 'rxjs/operators';const source$ = throwError(new Error('API Failed')); // 模拟错误source$.pipe(onErrorReturn(() => ({ data: 'Default Value' })) // 错误时返回默认值).subscribe({next: (val) => console.log('Received:', val), // 输出: Received: { data: 'Default Value' }error: (err) => console.error('Error:', err), // 不会触发});
底层原理:
onErrorReturn
会在error
发生时拦截错误,并调用回调函数返回一个默认值。- 该操作符会 终止原 Observable,并返回一个新的 Observable,发射默认值后
complete
。
2. onErrorResume
:切换备用数据流
核心思想:当主数据流失败时,切换到备用数据流(Fallback Stream)。
适用场景:
- 主 API 失败时,回退到缓存/备用 API。
- 多数据源冗余设计(如 CDN 回源)。
示例(RxJS):
import { of, throwError } from 'rxjs';
import { onErrorResumeWith } from 'rxjs/operators';const mainApi$ = throwError(new Error('Main API Down'));
const fallbackApi$ = of({ data: 'Fallback Data' });mainApi$.pipe(onErrorResumeWith(fallbackApi$) // 主API失败时切换到备用流).subscribe({next: (val) => console.log('Received:', val), // 输出: Received: { data: 'Fallback Data' }error: (err) => console.error('Error:', err), // 不会触发});
底层原理:
onErrorResumeWith
会在错误发生时 取消订阅原 Observable,并立即订阅备用 Observable。- 如果备用流也失败,错误会继续传播(除非嵌套使用多个
onErrorResumeWith
)。
5.2.2 retry
/ retryWhen
(错误重试)
1. retry
:固定次数重试
核心思想:在发生错误时,自动重新订阅数据流(可设定最大重试次数)。
适用场景:
- 临时性错误(如网络抖动、API 限流)。
- 需要 简单重试逻辑 的场景。
示例(RxJS):
import { throwError, timer } from 'rxjs';
import { retry } from 'rxjs/operators';let attempts = 0;
const flakyApi$ = new Observable((subscriber) => {attempts++;if (attempts < 3) {subscriber.error(new Error('API Failed')); // 前两次模拟失败} else {subscriber.next('Success on attempt ' + attempts);subscriber.complete();}
});flakyApi$.pipe(retry(2) // 最多重试2次(共3次尝试)).subscribe({next: (val) => console.log('Received:', val), // 输出: Received: Success on attempt 3error: (err) => console.error('Error:', err), // 如果第3次仍失败,会触发});
底层原理:
retry(n)
会在每次错误时重新订阅源 Observable,最多n
次。- 如果所有重试均失败,错误会传递给
Subscriber
。
2. retryWhen
:高级条件重试
核心思想:通过 自定义逻辑控制重试策略(如指数退避、依赖条件重试)。
适用场景:
- 复杂重试策略(如指数退避、Token 刷新后重试)。
- 需要 动态调整重试行为(如根据错误类型决定是否重试)。
示例(RxJS:指数退避):
import { throwError, timer } from 'rxjs';
import { retryWhen, mergeMap, delay } from 'rxjs/operators';const flakyApi$ = throwError(new Error('API Failed'));flakyApi$.pipe(retryWhen((errors) =>errors.pipe(mergeMap((err, attempt) => {if (attempt >= 3) {return throwError(err); // 超过3次后放弃}const delayMs = 1000 * 2 ** attempt; // 指数退避:1s, 2s, 4s...console.log(`Retry in ${delayMs}ms`);return timer(delayMs); // 延迟后重试})))).subscribe({next: (val) => console.log('Received:', val),error: (err) => console.error('Final Error:', err), // 输出: Final Error: Error: API Failed});
底层原理:
retryWhen
接收一个Observable<Error>
,允许自定义重试逻辑。- 每次错误时,可以:
- 返回
Observable
延迟重试(如timer
)。 - 返回
throwError
终止重试。
- 返回
- 适用于 Token 刷新后重试:
retryWhen((errors) =>errors.pipe(mergeMap((err) => {if (isTokenExpired(err)) {return refreshToken().pipe( // 先刷新TokenmergeMap(() => timer(1000)) // 再延迟重试);}return throwError(err); // 非Token错误直接抛出})) )
5.3 错误处理策略对比
方法 | 适用场景 | 优点 | 缺点 |
---|---|---|---|
onErrorReturn | 提供默认值(如空数据、占位图) | 简单易用,确保流不中断 | 无法恢复真实数据 |
onErrorResume | 切换到备用数据源(如缓存/冗余API) | 支持多数据源冗余 | 备用数据可能不一致 |
retry | 临时性错误(如网络抖动) | 自动重试,减少手动处理 | 可能加重服务器负载(无限重试时) |
retryWhen | 复杂重试逻辑(如指数退避、Token刷新) | 灵活控制重试策略 | 实现复杂度较高 |
5.4 总结
错误回退(Fallback)
onErrorReturn
:适合静态降级(如默认值)。onErrorResume
:适合动态降级(如备用API)。
错误重试(Retry)
retry(n)
:适合简单重试(固定次数)。retryWhen
:适合高级策略(指数退避、条件重试)。
最佳实践
- 关键数据:优先使用
retryWhen
+onErrorResume
保证可用性。 - 非关键数据:使用
onErrorReturn
快速降级。 - 监控所有错误:在
subscribe
的error
回调中记录日志。
通过合理组合这些策略,可以构建 健壮、可恢复的 React 数据流应用。
相关文章:
React编程高级主题:错误处理(Error Handling)
文章目录 **5.2 错误处理(Error Handling)概述****5.2.1 onErrorReturn / onErrorResume(错误回退)****1. onErrorReturn:提供默认值****2. onErrorResume:切换备用数据流** **5.2.2 retry / retryWhen&…...
【设计模式】代理模式
简介 假设你在网上购物时,快递员无法直接将包裹送到你手中(比如你不在家)。 代理模式的解决方案是: 快递员将包裹交给小区代收点(代理),代收点代替你控制和管理包裹的访问。 代收点可以添加额外…...
局域网:电脑或移动设备作为主机实现局域网访问
电脑作为主机 1. 启用电脑的网络发现、SMB功能 2. 将访问设备开启WIFI或热点,用此电脑连接;或多台设备连接到同一WIFI 3. 此电脑打开命令行窗口,查看电脑本地的IP地址 Win系统:输入"ipconfig",回车后如图 4.…...
图论的基础
E - Replace(判环,破环成链) #include <bits/stdc.h> #include <atcoder/dsu>using namespace std; using namespace atcoder;const int C 26;int main() {int n;cin >> n;string s, t;cin >> s >> t;if (s …...
Jetpack Compose CompositionLocal 深入解析:局部参数透传实践
Jetpack Compose CompositionLocal 深入解析:局部参数透传实践 在 Jetpack Compose 中,如何优雅地在组件之间传递数据,而不需要层层传参? CompositionLocal 就是为了解决这个问题的! 1. 什么是 CompositionLocal&#…...
第十五届蓝桥杯大赛软件赛省赛Python 大学 C 组:3.数字诗意
题目1 数字诗意 在诗人的眼中,数字是生活的韵律,也是诗意的表达。 小蓝,当代顶级诗人与数学家,被赋予了”数学诗人”的美誉。他擅长将冰冷的数字与抽象的诗意相融合,并用优雅的文字将数学之美展现于纸上。 某日&…...
Oracle数据库数据编程SQL<8 文本编辑器Notepad++和UltraEdit(UE)对比>
首先,用户界面方面。Notepad是开源的,界面看起来比较简洁,可能更适合喜欢轻量级工具的用户。而UltraEdit作为商业软件,界面可能更现代化,功能布局更复杂一些。不过,UltraEdit支持更多的主题和自定义选项&am…...
P12013 [Ynoi April Fool‘s Round 2025] 牢夸 Solution
Description 给定序列 a ( a 1 , a 2 , ⋯ , a n ) a(a_1,a_2,\cdots,a_n) a(a1,a2,⋯,an),有 m m m 个操作分两种: add ( l , r , k ) \operatorname{add}(l,r,k) add(l,r,k):对每个 i ∈ [ l , r ] i\in[l,r] i∈[l,r] 执行 …...
PostgreSQL LIKE 操作符详解
PostgreSQL LIKE 操作符详解 引言 在数据库查询中,LIKE 操作符是一种非常常用的字符串匹配工具。它可以帮助我们实现模糊查询,从而提高查询的灵活性。本文将详细介绍 PostgreSQL 中的 LIKE 操作符,包括其语法、使用方法以及一些注意事项。 LIKE 操作符语法 LIKE 操作符通…...
【前端】【Nuxt3】Nuxt3的生命周期
路由导航和中间件执行顺序 路由导航开始 中间件执行顺序: 全局中间件(middleware/*.global.js)布局中间件(在definePageMeta中定义的布局级中间件)页面中间件(在definePageMeta中定义的页面级中间件&#…...
热更新简介+xLua基础调用
什么是冷更新 开发者将测试好的代码,发布到应用商店的审核平台,平台方会进行稳定性及性能测试。测试成功后,用户即可在AppStore看到应用的更新信息,用户点击应用更新后,需要先关闭应用,再进行更新。 什么是…...
大钲资本押注儒拉玛特全球业务,累计交付超2500条自动化生产线儒拉玛特有望重整雄风,我以为它破产倒闭了,担心很多非标兄弟们失业
1. 交易概况 时间与主体:大钲资本于2025年4月1日正式宣布完成对儒拉玛特自动化技术(苏州)有限公司及其全球子公司和关联企业的收购。交易通过大钲资本旗下美元基金设立的儒拉玛特(新加坡)公司作为控股主体进行,交易金额未披露。 收购范围:包括儒拉玛特亚太、欧洲、北美等…...
FPGA系统开发板调试过程不同芯片的移植步骤介绍
目录 1.我目前使用的开发板 2.不同开发板的移植 步骤一:芯片型号设置 步骤二:约束修改 步骤三、IP核更新 关于FPGA系统开发板调试过程中不同芯片的移植。我需要先理清楚FPGA开发中移植到不同芯片的一般流程。首先,移植通常涉及到更换FPG…...
算法设计与分析5(动态规划)
动态规划的基本思想 将一个问题划分为多个不独立的子问题,这些子问题在求解过程中可能会有些数据进行了重复计算。我们可以把计算过的数据保存起来,当下次遇到同样的数据计算时,就可以查表直接得到答案,而不是再次计算 动态规划…...
ModuleNotFoundError: No module named ‘matplotlib_inline‘
ModuleNotFoundError: No module named matplotlib_inline 1. ModuleNotFoundError: No module named matplotlib_inline2. matplotlib-inlineReferences 如果你在普通的 Python 脚本或命令行中运行代码,那么不需要 matplotlib_inline,因为普通的 Python…...
Mysql 中的 B+树 和 B 树在进行数据增删改查后的结构调整过程是怎样的?
B 树的增、删、改、查数据的调整过程 在 MySQL 中,B 树 是一种广泛用于存储引擎(如 InnoDB)中的索引结构。B 树的结构使得它非常适合于处理大量数据的插入、删除和查询等操作。B 树是一种自平衡的树数据结构,其中所有的值都存储在…...
在Rust生态中探索高性能HTTP服务器:Hyperlane初体验
在Rust生态中探索高性能HTTP服务器:Hyperlane初体验 最近在调研Rust的HTTP服务器方案时,发现了一个有趣的新项目——Hyperlane。这个轻量级库宣称在保持简洁API的同时,性能表现可圈可点。作为Rust生态的长期观察者,我决定深入体验…...
AI医疗诊疗系统设计方案
AI医疗诊疗系统设计方案 1. 项目概述 1.1 项目背景 随着人工智能技术的快速发展,将AI技术应用于医疗诊疗领域已成为提升医疗服务效率和质量的重要途径。本系统旨在通过AI技术辅助医生进行诊疗服务,提供智能化的医疗决策支持。 1.2 项目目标 提供全面…...
k8s的StorageClass存储类和pv、pvc、provisioner、物理存储的链路
k8s的StorageClass存储类和pv、pvc、provisioner、物理存储的链路 StorageClass能自动创建pv 在控制器中,直接声明storageClassName,不仅能自动创建pvc,也能自动创建pv stoageclass来自于provisioner,provisioner来自于pod&#x…...
【移动编程技术】作业1 中国现代信息科技发展史、Android 系统概述与程序结构 作业解析
单选题(共 20 题,每题 5 分,满分 100 分) (单选题) 1946 年第一台计算机问世,计算机的发展经历了 4 个时代,它们是()。 选项: A. 模拟计算机、数字计算机、混合计算机、智…...
SQL Server数据库异常-[SqlException (0x80131904): 执行超时已过期] 操作超时问题及数据库日志已满的解决方案
🧑 博主简介:CSDN博客专家、CSDN平台优质创作者,获得2024年博客之星荣誉证书,高级开发工程师,数学专业,拥有高级工程师证书;擅长C/C、C#等开发语言,熟悉Java常用开发技术,…...
使用ollama部署本地大模型(没有GPU也可以),实现IDEA和VS Code的git commit自动生成
详情 问豆包,提示词如下:收集下ollama相关信息,包括但不限于:官网地址/GitHub地址/文档地址 官网地址 https://ollama.com/ GitHub 地址 https://github.com/ollama/ollama 文档地址 https://github.com/ollama/ollama/blo…...
线程同步与互斥(上)
上一篇:线程概念与控制https://blog.csdn.net/Small_entreprene/article/details/146704881?sharetypeblogdetail&sharerId146704881&sharereferPC&sharesourceSmall_entreprene&sharefrommp_from_link我们学习了线程的控制及其相关概念之后&#…...
ngx_test_full_name
定义在 src\core\ngx_file.c static ngx_int_t ngx_test_full_name(ngx_str_t *name) { #if (NGX_WIN32)u_char c0, c1;c0 name->data[0];if (name->len < 2) {if (c0 /) {return 2;}return NGX_DECLINED;}c1 name->data[1];if (c1 :) {c0 | 0x20;if ((c0 &…...
R 列表:深入解析及其在数据分析中的应用
R 列表:深入解析及其在数据分析中的应用 引言 在R语言中,列表(List)是一种非常重要的数据结构,它允许将不同类型的数据项组合在一起。列表在数据分析、统计建模以及数据可视化中扮演着关键角色。本文将深入探讨R列表…...
智能体中的知识库、数据库与大模型详解
前言 在 LLM(大语言模型)驱动的智能体架构中,知识库(Knowledge Base)、数据库(Database)和大模型(LLM)是关键组成部分,它们共同决定了智能体的理解能力、决策…...
AMD Versal™ AI Core Series VCK190 Evaluation Kit
AMD Versal™ AI Core Series VCK190 Evaluation Kit AMD VCK190 是首款 Versal™ AI Core 系列评估套件,可帮助设计人员使用 AI 和 DSP 引擎开发解决方案,与当前的服务器级 CPU 相比,该引擎能够提供超过 100 倍的计算性能。Versal AI Core …...
ARM-外部中断,ADC模数转换器
根据您提供的图片,我们可以看到一个S3C2440微控制器的中断处理流程图。这个流程图展示了从中断请求源到CPU的整个中断处理过程。以下是流程图中各个部分与您提供的寄存器之间的关系: 请求源(带sub寄存器): 这些是具体的…...
【从零实现Json-Rpc框架】- 项目实现 - 客户端注册主题整合 及 rpc流程示意
📢博客主页:https://blog.csdn.net/2301_779549673 📢博客仓库:https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! &…...
AWS 云运维管理指南
一、总体目标 高可用性:通过跨可用区 (AZ) 和跨区域 (Region) 的架构设计,确保系统运行可靠。性能优化:优化AWS资源使用,提升应用性能。安全合规:利用AWS内置安全服务,满足行业合规要求(如GDPR、ISO 27001、等保2.0)。成本管控:通过成本优化工具,减少浪费,实现FinOp…...
vector的实现:
我们之前讲了vector的接口,我们今天来看一下vector的底层的实现: 在gitee上面我们的这个已经实现好了,我们看gitee就可以:vector的实现/vector的实现/vector的实现.h 拾亿天歌/拾亿天歌 - 码云 - 开源中国 我们在这强调比较难的…...
flutter 专题 九十六 Flutter开发之常用Widgets
上一篇,我们介绍了基础Widgets,接下来,我们看一下Flutter开发中一些比较常见的Widget。 Flutter Widget采用现代响应式框架构建,这是从 React 中获得的灵感,中心思想是用widget构建你的UI。 Widget描述了他们的视图在…...
Linux环境下内存错误问题排查与修复
最近这几天服务器总是掉线,要查一下服务器的问题。可以首先查看一下计算机硬件,这是一台某鱼上拼凑的服务器: sudo lshw -shortH/W path Device Class Description system NF5270M3 (To be filled by O…...
flutter 专题 六十八 Flutter 多图片上传
使用Flutter进行应用开发时,经常会遇到选图、拍照等需求。如果要求不高,Flutter图库选择可以使用官方提供的image_picker,如果需要多选,那么可以使用multi_image_picker插件库。multi_image_picker库支持图库管理,多选…...
与总社团联合会合作啦
2025.4.2日,我社团向总社团联合会与暮光社团发起合作研究“浔川代码编辑器v2.0”。至3日,我社团收到回复: 总社团联合会: 总社团联合会已收到浔川社团官方联合会的申请,经考虑,我们同意与浔川社团官方联合…...
技巧:使用 ssh 设置隧道代理访问 github
问题 由于不可知的原因,在国内服务器不能访问 Github。但是有clone代码需求,这里介绍一种可行的方法。 解决办法 使用 ssh 设置代理,让代理服务器请求 github 解决。 第一步 ssh -fND 1080 用户名代理服务器IP这里的意思是监听 1080 端口…...
安装 TabbyAPI+Exllamav2 和 vLLM 的详细步骤
在 5090 显卡上成功安装 TabbyAPIExllamav2 和 vLLM 并非易事,经过一番摸索,我总结了以下详细步骤,希望能帮助大家少走弯路。 重要提示: 用户提供的 PyTorch 安装使用了 cu128,这并非标准 CUDA 版本。请根据你的系统实…...
Linux 进程信号
目录 信号 生活角度的信号 技术应用角度的信号 signal函数 信号概念 用kill -l命令可以察看系统定义的信号列表 信号处理常见方式概览 信号的产生 通过键盘组合键发送信号 通过系统函数向进程发信号 由软件条件产生信号 由硬件异常产生信号 信号的保存 阻塞信号 …...
【学习篇】fastapi接口定义学习
fastapi学习链接:用户指南 1. 路径参数 访问fastapi接口的默认http路径为http://127.0.0.1:8000,/items为定义的接口函数read_item的路径,/{item_id}这个用大括号括起来的参数就是路径参数,接口函数可以通过引用这个路径参数名称…...
第十二步:react
React 1、安装 1、脚手架 npm i -g create-react-app:安装react官方脚手架create-react-app 项目名称:初始化项目 2、包简介 react:react框架的核心react-dom:react视图渲染核心react-native:构建和渲染App的核心…...
MySQL简介
MySQL 是由瑞典 MySQL AB 公司开发的一款开源关系型数据库管理系统(RDBMS),现归属 Oracle 公司。以下是其核心特点及简介: 1. 基础特性 - 开源免费:遵循 GPL 协议,个人及中小型企业可免费使用,…...
AIGC时代Kubernetes企业级云原生运维实战:智能重构与深度实践指南
文章目录 一、AIGC技术栈与Kubernetes的深度融合1. 智能配置生成:从YAML到自然语言2. 动态资源优化:AI驱动的弹性伸缩 二、智能运维体系架构深度解析四维能力矩阵增强实现:关键组件升级代码示例: 三、企业级实战策略深度实践策略1…...
市场波动与交易策略优化
市场波动与交易策略优化 在交易市场中,价格波动是常态。如何有效应对市场的波动,制定合理的交易策略,成为许多交易者关注的重点。本文将探讨市场波动的影响因素,并介绍应对不同市场波动环境的策略。 一、市场波动的影响因素 市场供…...
Prolog语言的移动UI设计
Prolog语言的移动UI设计 随着移动设备的普及,用户界面的设计已成为软件开发的重要组成部分。移动UI设计不仅要注重美观,更要关注用户体验和功能的实现。使用Prolog语言进行移动UI设计,虽然相对少见,但其逻辑编程的特性为复杂的交…...
linux 命令 awk
awk 是 Linux/Unix 系统中一个强大的文本处理工具,尤其擅长处理结构化文本数据(如日志、表格数据)。它不仅是命令行工具,还是一种脚本语言,支持变量、条件、循环等编程特性 1. 基本语法 awk [选项] 模式 {动作} 文件名…...
在 PyQt 加载 UI 三种方法
目录 方法一:使用 uic 模块动态加载 (不推荐用于大型项目) 方法二:将 UI 文件编译为 Python 模块后导入 方法3:使用uic模块直接在代码中加载UI文件 注意事项 总结: 在PyQt中,加载UI文件通常…...
前端快速入门学习2-HTML
一、概述 HTML全称是Hypertext Markup Language(超文本标记语言) HTML通过一系列的 标签(也称为元素) 来定义文本、图像、链接等等。HTML标签是由尖括号包围的关键字。 标签通常成对出现,包括开始标签和结束标签(也称为双标签),内容位于这两个标签之间…...
Cortex-M系列MCU的位带操作
Cortex-M系列位带操作详解 位带(Bit-Banding)是Cortex-M3/M4等处理器提供的一种硬件特性,允许通过别名地址对内存或外设寄存器中的单个位进行原子读-改-写操作,无需禁用中断或使用互斥锁。以下是位带操作的完整指南: …...
【嵌入式-stm32电位器控制LED亮灭以及编码器控制LED亮灭】
嵌入式-stm32电位器控制LED亮暗 任务代码Key.cKey.hmain.c 实验现象 任务 本文主要介绍利用stm32f103C8T6实现电位器控制PWM的占空比大小来改变LED亮暗程度,按键实现使用定时器非阻塞式,其中一个按键切换3个LED的控制状态,另一个按键是重置当…...
抖音热点视频识别与分片处理机制解析
抖音作为日活数亿的短视频平台,其热点视频识别和分片处理机制是支撑高并发访问的核心技术。以下是抖音热点视频识别与分片的实现方案: 热点视频识别机制 1. 实时行为监控系统 用户行为聚合:监控点赞、评论、分享、完播率等指标的异常增长曲线内容特征分析:通过AI识别视频…...