HttpErrorHandler 방식

lee jae hwan·2022년 10월 3일

앵귤러

목록 보기
80/83

hero목록데이터를 서버로부터 받아야 할때 httpClient.get메소드로 받으면 된다.

HttpClient.get메소드는 옵저버블타입의 객체를 반환하하며 제네릭타입도 지원한다.

HttpClient.get< T >()사용하면 Observable< T >타입의 옵저버블 객체를 반환한다.

  getHeroes():Observable<Hero[]>{
    const url = 'api/heroes';

    return this.httpClient.get<Hero[]>(url).pipe(
      catchError((error:HttpErrorResponse)=>{

        return scheduled([],queueScheduler);
      })
    );

  }

getHeroes함수는 httpClient.get<Hero[]>(url)로 옵저버블객체를 반환하고 에러발생했을때 catchError오퍼레이터의 핸들러가 호출된다.

catchError오퍼레이터는 error, caught인자를 받는 핸들러가 필요하므로 여기서는 HttpErrorResponse타입의 errror객체만 인자로 전달하고 에러로그를 남기고 빈배열을 반환하면 어플리케이션은 빈목록을 반환받고 작동한다.


이 시점에서 어플리케이션의 완성도를 고려해서 생각해야 할것이 있다.

  1. hero목록과 같은 유사한 서버통신은 매우 빈번하게 발생하기 때문에 catchError에 전달되는 핸들러를 위와 같이 매번 화살표함수로 정의하는 것은 중복되어 비효율적이다.

  2. 서버와통신하는 작업별로 세분화해서 에러로그를 남기는 것이 필요하며 이 방법을 위해 중첩함수의 클로저를 사용한다.


catchError오퍼레이터에 직접 화살표함수를 정의하는 것은 좋지 못한 방법이고 반복적으로 발생하는 작업이므로 함수를 호출하면 핸들러가 반환되도록 하는 방법이 좋다.

catchError오퍼레이터에 전달되는 핸들러는 에러에 대한 정보를 로그로 남겨야 하고 어플리케이션이 계속 수행될 수 있도록 빈 옵저버블객체를 반환해야 한다.

httpClient.get<Hero[]>(url)로 제네릭타입을 지정하면 반환객체도 같은 타입으로 명시되어 반환되는 장점이 있다.

에러가 발생했을때는 빈배열을 옵저버블로 반환하면 해당타입으로 명시되어 반환된다.


hero서비스에는 getHeroes(), searchHeroes(), addHero()...등 다수의 서버통신함수들이 있으며 모두 request요청에대해 에러가 발생할 수 있다.

따라서 에러로그도 각 함수기능별로 구분하여 로그를 남겨야 할 것이다.

또한 hero서비스이외에 다른 서비스에서도 사용되므로 에러로그는 serviceName, operation가 구분되어한다.

someFunc(serviceName, opertion, result){
return (error:HttpErrorResponse)=>{
//에러로그
return of(result);
}
}
이와 같이 핸들러반환함수를 정의하고

  getHeroes():Observable<Hero[]>{
    const url = 'api/heroes';
    serviceName = '...';
    opertiona = '...';
	result = [];
    return this.httpClient.get<Hero[]>(url).pipe(
      catchError(someFunc(serviceName, opertion, result))
    );

  }

위와 같이 someFunc을 호출하면 되지만
getHeroes, searchHeroes, addHero 함수에도 someFunc을 호출해야 하는데 serviceName은 같은 값을 사용하게 되는 중복이 발생한다.

중복을 없애려면 someFunc(opertion, result)이렇게 2개의 인자만 사용해야 한다.

3개인자 함수를 1개인자함수와 2개인자함수로 나누려면 클로저를 사용하면 된다.

1개의 인자를 사용하는 함수를 정의하고 2개의 인자를 사용하는 화살표함수를 반환하면 된다.

  return this.httpClient.get<Hero[]>(url).pipe(
    catchError(someFunc(serviceName)(opertion,result))
  );

반환된 화살표함수를 별도의 변수에 할당하지 않으면 이와 같이 사용되어야 하며 이것은 원하는 방식이 아니다.

반환된 2개인자 함수를 변수에 할당하고 필요한 시점에 호출하여 사용하면 된다.

0개의 댓글