error handling

• 백앤드와 협업하여 Rest API를 기반으로 코드를 작성하다 보면 에러처리를 해야하고 그럼으로써 사용자로 하여금 더 좋은 react를 부여한다.

• 자 다음은 axios docs와 stackOverFlow 형님들이 제공하는 에러 처리 코드이다.

import axios from 'axios';

axios.get('https://example.com/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    return Promise.reject(new Error(error.message));
  })
  .catch(error => {
    console.error(error);
  });

• 그리고 아래는 기존에 사용하던 throw를 이용한 에러 처리 코드이다.

try {
  axios.get('https://example.com/api/data')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      throw new Error(error.message);
    });
} catch (error) {
  console.error(error);
}

• 결론부터 말하면 둘다 동작하지 않는다. 첫번째 코드는 왜 동작하지 않는지는 모르겠다..

• 두번째 코드는 axios자체가 Promise type이지만 throw가 왜 통하지 않는지 모르겠다..

• 혹시 둘 다 안 되는 이유를 아시면 댓글에 적어주십셔...

해결 코드

const userId = context.rootGetters['아이디'];
const answerData = { Rest API에 필요한 데이터 }
const response = await axios.post('Rest API URL', answerData)
const responseData = await response;
if (responseData.status!==200) {
  const error = new Error(responseData.message)
  throw error;
}

• 위와 같이 async, await를 이용하여 해결하면 된다.

with TS

try {
  const { data } = await getTermListSearch(argument)
  data를 이용한 로직...
} catch (e) {
  if (e instanceof AxiosError) {
    const error = new Error(exceptionHandler(e.response!.status).text)
    throw error
  }
}

• catch 절의 e 는 반드시 any 타입이기 때문에

} catch (e:AxiosError) {
  const error = new Error(exceptionHandler(e.response!.status).text)
  throw error

가 아닌 처음 로직 처럼 catch문 시작하고 instanceof 속성으로 밑에서 걸러줘야한다.