Angular 中的全局错误处理

import { Component } from '@angular/core';
import { MyService } from './my-service.service';
import { catchError, finalize } from 'rxjs/operators';
import { of, throwError } from 'rxjs';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  isLoading = false;
  data: any = null;
  errorMessage: string = null;

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

  getData() {
    this.isLoading = true;
    this.errorMessage = null; // Clear previous error message

    this.myService.getData()
      .pipe(
        catchError(error => {
          this.toastr.error('数据获取失败', '错误');
          console.error('Error fetching data:', error);
          this.errorMessage = '数据获取失败，请稍后再试';
          return throwError(() => error); // Re-throw the error to be handled by the next pipe
        }),
        finalize(() => this.isLoading = false) // Ensure loading indicator is always hidden
      )
      .subscribe({
        next: response => {
          this.data = response;
          this.toastr.success('数据获取成功!', '成功');
        },
        error: err => {
          // Error already handled in catchError, but can add additional error handling here if needed.
        }
      });
  }
}