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中文網其他相關文章！