Angular의 전역 오류 처리

Angular 17에서 서비스를 구독하는 동안 오류를 포착하고 로딩 또는 기타 UI 상태를 전환하려면 catchError와 같은 RxJS 연산자와 함께 Observable의 구독 메서드를 사용할 수 있습니다. 단계별 접근 방식은 다음과 같습니다.

예:

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 연산자는 오류를 포착하고 처리(예: 기록, 알림 표시)하고 애플리케이션 충돌을 방지하는 데 사용됩니다. 구독이 완료될 수 있도록 빈 관찰 가능 항목(of(null))을 반환합니다.

• Toastr 알림: ToastrService는 성공 및 오류 이벤트에 대한 알림을 표시하는 데 사용됩니다. 다른 것을 사용하는 경우 알림 시스템에 따라 이를 조정하세요.

이 접근 방식은 로딩 상태를 유지하고, 오류를 포착하고, UI의 반응성을 유지하면서 성공 및 실패 시나리오를 모두 적절하게 처리하는 데 도움이 됩니다.

위 내용은 Angular의 전역 오류 처리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!