Angular 中的全局错误处理

要在 Angular 17 中订阅服务时捕获错误并切换加载或其他 UI 状态，您可以使用 observables 的 subscribe 方法以及 RxJS 运算符（如 catchError）。以下是分步方法：

示例：

1。带有加载指示器的服务呼叫：

• 在开始服务调用之前将加载标志设置为 true。
• 订阅服务并处理成功和错误响应。
• 调用完成时（无论成功还是失败）将加载标志重置为 false。

2。处理错误：

• 在可观察管道内使用 catchError 运算符来捕获和处理错误。
• 可以选择使用 Toastr 等方式显示通知或错误消息。

示例代码：

import { Component } from '@angular/core';
import { MyService } from './my-service.service'; // Your service here
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';
import { ToastrService } from 'ngx-toastr'; // If you are using Toastr for notifications

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  loading = false;   // Flag to toggle loading indicator
  data: any = null;  // Variable to hold the service response data

  constructor(private myService: MyService, private toastr: ToastrService) { }

  getData() {
    this.loading = true;  // Start loading before the service call
    this.myService.getData()  // Call the service method
      .pipe(
        catchError((error) => {
          this.toastr.error('Failed to fetch data', 'Error');  // Show an error notification
          console.error(error);  // Log the error (optional)
          this.loading = false;  // Stop loading on error
          return of(null);  // Return an empty observable to prevent further issues
        })
      )
      .subscribe(
        (response) => {
          this.data = response;  // Handle successful response
          this.toastr.success('Data fetched successfully!', 'Success');  // Success notification
        },
        () => {
          this.loading = false;  // Stop loading on error (handled in catchError as well)
        },
        () => {
          this.loading = false;  // Stop loading on completion (either success or error)
        }
      );
  }
}

要点：

• 加载标志：加载标志用于显示/隐藏加载微调器。它在服务调用之前设置为 true，并在错误和完成回调中重置为 false。

• 错误处理：catchError 运算符用于捕获错误、处理错误（例如，记录错误、显示通知）并防止应用程序崩溃。它返回一个空的 observable (of(null))，以便订阅可以完成。

• Toastr 通知：ToastrService 用于显示成功和错误事件的通知。如果您使用其他东西，请根据您的通知系统进行调整。

此方法可帮助您维护加载状态、捕获错误并优雅地处理成功和失败场景，同时保持 UI 响应能力。

以上是Angular 中的全局错误处理的详细内容。更多信息请关注PHP中文网其他相关文章！