catchError 파이프 사용

RxJS에서 오류를 잡는 예전 방식은 이와 같은 구독별 방식이었습니다. 일부 데이터를 얻기 위해 http 서비스를 사용하는 앱을 상상해 보십시오.

class yourHttpClient {
  get<T>() : Observable<T> {
    return this.http.get<T>('endpoint');
  }
}

yourHttpClient.get().subscribe(() => {
    // Your logic
  },
  (error) => {
    console.log(error);
  }
);

이것의 단점은 모든 구독이 오류를 포착하고 그에 따라 처리해야 한다는 것입니다.

catchError 파이프

대신 HttpClient 자체에서 catchError 파이프를 사용하여 오류를 처리할 수 있습니다. catchError RxJS 파이프에서 볼 수 있듯이 오류가 기록되고 반환되며 구독을 생성할 때 더 이상 오류 논리가 필요하지 않습니다.

class yourHttpClient {
  get<T>() : Observable<T> {
    return this.http.get<T>('endpoint').pipe(
      catchError((error) => {
        console.log(error);
        return error;
      })
  }
}

yourHttpClient.get().subscribe(() => {
    // Your logic
  }
);

이 예제를 보면 조금 더 개선할 수 있습니다. get 메서드에서 단일 결과만 얻는다는 것을 알고 있습니다. 따라서 get 요청에 first() 연산자를 추가하여 구독을 닫을 수 있습니다.

class yourHttpClient {
  get<T>() : Observable<T> {
    return this.http.get<T>('endpoint').pipe(
      catchError((error) => {
        console.log(error);
        return error;
      }),
      first()
  }
}