Angular Academy · 课时

重试与加载指示器

Q: 「重试与加载指示器」这节课中我会学到什么？

实现重试机制和全局加载动画 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

实现重试机制和全局加载动画

第 4 / 4 课13 个步骤

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

两个横切性关注点

拦截器非常适合处理两种全局应用行为：自动重试失败的请求，以及在任意请求进行期间跟踪全局加载状态。

使用 retry 重试

在 next(req) 后通过管道使用 retry，以重新尝试暂时性失败。

import { retry } from 'rxjs';

export const retryInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(retry(2));

仅重试安全请求

可以放心重试幂等方法（GET、HEAD）；重试 POST 或 PUT 时需谨慎，因为这可能导致重复操作。请根据方法进行保护。

export const retryInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.method !== 'GET') return next(req);
  return next(req).pipe(retry(2));
};

使用延迟和退避进行重试

添加延迟，避免重试请求持续冲击服务器，并使用指数退避来提高可靠性。

import { timer } from 'rxjs';

next(req).pipe(
  retry({
    count: 3,
    delay: (_err, n) => timer(Math.pow(2, n) * 500)
  })
);

条件式重试

仅对可重试的错误（5xx、网络错误）进行重试，不要重试 4xx 客户端错误，因为它们仍会失败。

retry({
  count: 2,
  delay: (err, n) =>
    err.status >= 500 ? timer(n * 500) : throwError(() => err)
})

全局加载状态

加载服务会跟踪活动请求的数量，以便界面显示全局加载图标。

export class LoadingService {
  private active = signal(0);
  readonly isLoading = computed(() => this.active() > 0);
  start() { this.active.update(n => n + 1); }
  stop()  { this.active.update(n => Math.max(0, n - 1)); }
}

加载拦截器

请求开始时递增，请求完成时递减；使用 finalize 可确保成功或错误时都执行递减操作。

import { finalize } from 'rxjs';

export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
  const loading = inject(LoadingService);
  loading.start();
  return next(req).pipe(finalize(() => loading.stop()));
};

为什么使用 finalize

finalize 会在完成、错误、OR 取消订阅时运行，从而保证加载计数器始终递减——即使请求失败或被取消，也不会出现一直显示的加载图标。

显示加载指示器

在根模板中绑定加载信号。

// root component template:
// @if (loading.isLoading()) {
//   <app-spinner />
// }

排除后台请求

某些轮询或预取请求不应触发加载指示器。请使用自定义标头或上下文令牌来跳过这些请求。

import { HttpContextToken } from '@angular/common/http';
export const SKIP_LOADING = new HttpContextToken(() => false);
// in interceptor: if (req.context.get(SKIP_LOADING)) return next(req);

组合重试与加载状态

请合理安排它们，使重试发生在同一个加载阶段内：开始加载，在内部重试，最后只结束一次。将加载逻辑放在最外层，使其涵盖所有重试尝试。

快速检查

测试您对重试和加载指示器的理解。

在交互式课程中回答

回顾：重试与加载指示器

拦截器可以简洁地处理重试和全局加载状态。

使用带延迟或退避的 retry；将其限制在幂等或可重试的情况下。
在服务中跟踪活动请求；使用 finalize 递减计数。
使用上下文令牌跳过后台请求。

您已完成 HttpClient 拦截器的学习。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 38
课程: 144

免费开始学习查看完整课程

常见问题解答

「重试与加载指示器」课时是免费的吗？

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

「重试与加载指示器」这节课中我会学到什么？

实现重试机制和全局加载动画你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

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

「重试与加载指示器」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Angular Academy