Pengendalian Ralat Global dalam Sudut

Untuk menangkap ralat semasa melanggan perkhidmatan dalam Angular 17 dan togol pemuatan atau keadaan UI lain, anda boleh menggunakan kaedah langgan observables bersama-sama dengan operator RxJS seperti catchError. Berikut ialah pendekatan langkah demi langkah:

Contoh:

1. Panggilan perkhidmatan dengan penunjuk pemuatan:

• Tetapkan bendera pemuatan kepada benar sebelum memulakan panggilan perkhidmatan.
• Langgan perkhidmatan dan kendalikan jawapan kejayaan dan ralat.
• Tetapkan semula bendera pemuatan kepada palsu apabila panggilan selesai (sama ada semasa berjaya atau gagal).

2. Mengendalikan ralat:

• Gunakan operator catchError di dalam saluran paip yang boleh diperhatikan untuk menangkap dan mengendalikan ralat.
• Secara pilihan paparkan pemberitahuan atau mesej ralat menggunakan sesuatu seperti Toastr.

Kod Contoh:

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)
        }
      );
  }
}

Isi Penting:

• Memuatkan Bendera: Bendera pemuatan digunakan untuk menunjukkan/menyembunyikan pemutar pemuatan. Ia ditetapkan kepada benar sebelum panggilan perkhidmatan dan ditetapkan semula kepada palsu dalam kedua-dua ralat dan panggilan balik penyiapan.

• Pengendalian Ralat: Operator catchError digunakan untuk menangkap ralat, mengendalikannya (cth., log ia, tunjukkan pemberitahuan) dan menghalang aplikasi daripada ranap. Ia mengembalikan pemerhatian kosong (of(null)) supaya langganan dapat diselesaikan.

• Pemberitahuan Toastr: ToastrService digunakan untuk memaparkan pemberitahuan untuk peristiwa kejayaan dan ralat. Laraskan ini berdasarkan sistem pemberitahuan anda jika anda menggunakan sesuatu yang lain.

Pendekatan ini membantu anda mengekalkan keadaan pemuatan, menangkap ralat dan mengendalikan kedua-dua senario kejayaan dan kegagalan dengan anggun sambil memastikan UI responsif.

Atas ialah kandungan terperinci Pengendalian Ralat Global dalam Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!