Angular Academy · 课时

错误处理运算符

Q: 「错误处理运算符」这节课中我会学到什么？

使用 catchError 和 retry 进行恢复。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 catchError 和 retry 进行恢复。

错误处理运算符 是 CoddyKit 上的免费 Angular Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

可观察对象中的错误

当可观察对象发出错误时，它会终止：不再发出任何值，并运行错误处理程序。错误处理运算符可以让您恢复、重试或转换错误，而不是让数据流中断。

错误路径

您可以在观察者中处理错误，也可以使用运算符处理错误。如果不处理，未处理的错误可能会导致订阅崩溃。

this.http.get('/api/data').subscribe({
  next: d => console.log(d),
  error: err => console.error('failed', err)
});

catchError

catchError 会拦截错误并返回一个替代可观察对象，让数据流能够平稳地继续运行。

import { catchError, of } from 'rxjs';

this.http.get('/api/data').pipe(
  catchError(err => {
    console.error(err);
    return of([]); // fallback value
  })
).subscribe(data => console.log(data));

有选择地重新抛出错误

在 catchError 内部，您可以检查错误，并决定是恢复，还是使用 throwError 重新抛出错误。

import { catchError, throwError, of } from 'rxjs';

source$.pipe(
  catchError(err =>
    err.status === 404 ? of(null) : throwError(() => err)
  )
).subscribe();

重试

retry(n) 发生错误时会重新订阅源数据，最多重试 n 次——适合处理暂时性的网络故障。

import { retry } from 'rxjs';

this.http.get('/api/flaky').pipe(
  retry(2) // try up to 3 times total
).subscribe(d => console.log(d));

使用配置进行重试

对象形式可以在多次尝试之间添加延迟（并支持退避函数），从而避免不断冲击服务器。

this.http.get('/api/flaky').pipe(
  retry({ count: 3, delay: 1000 })
).subscribe(d => console.log(d));

retryWhen 风格的退避

要实现指数退避，delay 选项可以是一个函数，返回一个可观察对象，并让每次尝试的延迟逐步增加。

import { timer } from 'rxjs';

source$.pipe(
  retry({
    delay: (err, count) => timer(count * 1000)
  })
).subscribe();

重试后使用 catchError

可以将它们组合起来：重试暂时性故障，并在重试次数耗尽后平稳地使用备用方案。

this.http.get('/api/data').pipe(
  retry({ count: 2, delay: 500 }),
  catchError(() => of([]))
).subscribe(data => console.log(data));

放置位置很重要

catchError 在管道中的位置决定了作用域。在 switchMap 内部时，它会分别捕获每个内部请求的错误，使外部数据流保持活动状态；放在末尾时，它会捕获所有错误。

term$.pipe(
  switchMap(t => this.http.get('/api?q=' + t).pipe(
    catchError(() => of([])) // outer stream survives
  ))
).subscribe();

将 EMPTY 作为静默备用方案

从 catchError 返回 EMPTY 会在不发出任何值的情况下完成数据流——适合希望吞掉错误且不发出内容的场景。

import { EMPTY, catchError } from 'rxjs';

source$.pipe(
  catchError(() => EMPTY)
).subscribe();

使用 finalize 执行清理

finalize 会在数据流因任何原因结束时运行回调——无论是完成、发生错误还是取消订阅。将它与错误处理结合使用，可以确保始终重置加载状态。

import { finalize, catchError, of } from 'rxjs';

this.loading = true;
source$.pipe(
  catchError(() => of([])),
  finalize(() => this.loading = false)
).subscribe();

快速检查

测试您对错误处理的理解。

回顾：错误处理运算符

除非经过处理，否则错误会终止数据流。

catchError：通过返回替代可观察对象来恢复。
retry：失败时重新订阅，可选择添加延迟或退避。
放置位置（在 switchMap 内部还是末尾）会控制作用域。

您已完成《深入了解 RxJS 运算符》。

常见问题解答

「错误处理运算符」课时是免费的吗？

是的 — 「错误处理运算符」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「错误处理运算符」这节课中我会学到什么？

使用 catchError 和 retry 进行恢复。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「错误处理运算符」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy