3월 15일 TIL

Axios Response and Error Type

• 이번 프로젝트를 진행하면서 Axios의 data타입이 아닌 Axios의 응답 스키마에 대해서 알아보고 싶었다
  • 그리고 타입스크립트를 사용중이다보니 error를 any타입으로 두는게 조금 껄그럽다고 해야하나...
  • status코드를 사용할때도있고 혹은 header 등등등.. 알고싶은게 많아 정리한다

Response Type

• Response Type은 Axios공식 문서에도 잘 정리 되어있다

{
  data: {},
  status: 200,
  statusText: 'OK',
  headers: {},
  config: {},
  request: {}
}

• data
  • 서버가 제공하는 응답의 결과값 흔히 말하는 body 데이터 값이다
• status
  • HTTP의 상태코드임 해당 값에 따라 의미가 달라짐
  • ex) 201은 생성, 200은 성공 등등
• statusText
  • HTTP의 상태 메세지임
• headers
  • HTTP의 헤더임
    • 모든 헤더의 이름은 소문자이고 괄호 표기법을 사용해서 접근도 가능함
    • ex) "response.headers["contetn-type"]"
• config
  • 요청을 위해서 Axios가 제공하는 옵션들의 모음임
  • URL요청, 요청방법(method), 요청헤더, 요청데이터, 요청 타임아웃 등등을 설정 할 수 있음
  • 응답 데이터를 받을때 설정 할 수있는 옵션도 있음
  • ex) 응답 데이터 타입, 응답타임아웃, 응답 데이터 변환등이 있음
• request
  • 요청을 하기위해 서버에 응답값으로 넣어주는 데이터
  • node.js에서 마지막 ClientRequest 인스턴스임
  • 브라우저에서는 XMLHttpRequest임

---

Error 처리

• 기존 Typescript에서 error는 any타입이였지만 v4.4부터는 error object가 unknownType으로 지정되었음
  • 그러면서 Type Error가 발생되는 경우가 있다

해결방법

any타입 강제변형

• 가장 직관적이고 간단한 해결책이지만 TypeScript에서의 any가 어떤 타입인지 아는 사람들은 권장하지 않는 방법이란걸 알것

타입선언

• 이 방법이 어찌보면 위 방법보단 좋은 방법일지 모른다 하지만 이 방법도 좋은 방법은 아니다
• 자바스크립트의 error객체는 data,status,header로 구성 되어있다
• 이 속성 그대로 인터페이스로 타입을 정의해서 타입을 적용해주면 된다

예제

interface ErrorType extends Error {
  response?:{
     data: any;
     status: number;
     headers: string;
  }
}

try {
   await axios.get('url');
} catch (err: unknown) {
   const customErr = err as CustomError;
   console.error(customErr.response?.data);
   console.error(customErr.response?.status);
   console.error(customErr.response?.headers);
}

• 만일 변수 타입이 unknown 때 일때 어쩔수 없이 as 연산자를 사용하긴 하지만, 사실 as 도 any 만큼 지양하는것이 옳다.
  • as 를 붙인다는 것은 즉 사람이 직접 붙인다는 뜻인데, 사람의 작업에는 항상 실수가 일어나길 마련이기 때문에 언제 어디서 오류가 일어날수 있기 때문
  • 따라서 타입 단언을 사용하는 것보다는 정석 적인 방법인 타입 가드로 에러를 처리하는것이 옳다

타입 가드하기

• 가장 좋은 방법은 instanceof를 사용해서 타입가드를 하는것
  • 하지만 에러가 발생하게 되는데 인터페이스는 컴파일되면 사라지다 보니 instanceof 할 객체가 없어지기 때문임
• 타입스크립트에서 인터페이스와 클래스의 차이는 컴파일을 거친 후 js파일에 코드가 남느냐 남지않느냐의 차이
  • 인터페이스는 순전하게 타입스크립트의 문법이기 때문에 컴파일이 되면 코드가 사라짐
  • 하지만 클래스는 자바스크립트에도 있는 문법이기 때문에 컴파일이 되도 코드가 남는다
    • 자바스크립트의 클래스도 결국 거슬러 올라가면 똑같은 프로토타입 객체이기 때문에 이렇게 사용이 가능한것

// 인터페이스는 컴파일되면 자바스크립트에서 사라지기 때문에 err instanceof CusomError 가 불가능하게 된다.
// 그래서 컴파일되도 남아있는 클래스를 타입으로 이용하는 방법을 쓰는 것이다.
class ErrorClassType extends Error {
   response?: {
      data: any;
      status: number;
      headers: string;
   };
}

try {
   await axios.get('URL');
} catch (err: unknown) {
   if (err instanceof ErrorClassType) {
      console.error(err.response?.data);
   }

출처 블로그