ajax로 api를 요청할 때 에러 분기처리 - typescript

API를 요청할 때 보면, 404, 502등 요청 자체의 에러가 나는 경우라면, try-catch문이나 .catch 메소드에서 처리할 수 있다. 하지만 서버에서 요청을 실패했다는 정보를 가지고 오는 값이 라면, 200이기 때문에 에러를 명시적으로 throw해주지 않으면 분기처리하기가 손이 간다.

 

간단히 예를 보면

try {
      const 서버값 = await API요청()

    } catch (err) {
      console.log(err);
    }

 

이런 코드인 경우 서버값이 우리가 원하는 값을 가지고 있는 지, 아니면 서버가 미안하다면서 보낸 message가 들어있을지 아무도 모른다.

 

각 상태의 타입을 다음과 같다고 한다면

export interface 정상리턴 {
  data: []
}

export interface 에러리턴 {
  fail_code: string;
  fail_message: string;
}

 

서버 값은 저 두 타입중 하나 일 것인데, 이때 분기처리를 위해서 타입 가드를 활용한다.

 

function isAPIError<정상리턴,에러리턴>(apiResponse): apiResponse is 에러리턴{
	return (apiResponse as 에러리턴).fail_code !== undefined;
}

try {
	const 서버값: 정상리턴|에러리턴 = await API요청()
	if(isAPIError(서버값)){
    	// 에러 분기처리
		throw new Error(서버값.fail_message)
 	}
    // 정상값 처리
} catch (err) {
      console.log(err);
}

 

타입가드 함수는 api의 리턴값을 받아 체크하고 싶은 상태의 메소드나 프로퍼티를 이용하여  타입을 좁힐 수 있다.