[Axios] async / await를 사용한 Axios 에러 핸들링

루나·2022년 5월 17일
4

React에서 서버로 요청을 보낼때 Axios를 사용했는데 보통은 async / await를 사용하지 않아 굉장히 긴 코드가 되어버린다.

const registerEvent = (id, name, password) => {
    axios
      .post('users/register', { id, name, password })
      .then(res => {
      	...
      })
      .catch(err => {
        ...
      });
  };

이를 해결하기 위해 async / await를 사용하면 이와 같다.

const registerEvent = async (id, name, password) => {
    try {
      const res = await (await axios.post('users/login', { id, password })).data;
      ...
    } catch (err) {
      ...
    }
  };

내 서버는 요청에 대한 로직을 수행하다가 에러를 만나면 헤더에 success = false를 같이 넣어 보내면서 data.message에 해당 오류에 대한 내용을 같이 보내준다.

위의 방법에선 catch에서도 응답값이 err.data에 포함되어 전송되는 덕분에 확인할 수 있지만

async / await를 사용한 아래의 방법에선 서버에서의 응답을 받지 못했기 때문에 간략한 에러만을 표기한다.

요청이 복잡해지면 .then .catch가 매우 많아져 지저분해지기 때문에 개인적으로 async / await를 사용하여 코드를 따로따로 적는것이 더 보기좋다고 생각한다.

async / await를 사용한 응답 메시지 에러핸들링을 할 방법을 찾아다녔지만 결국 찾지못했다.... 일단 모든 에러를 똑같이 처리해주기로 했다.


그러나 이 글을 작성한 30분 뒤 마술같이 갑자기 해결됐다. async / await를 사용해서도 오류를 응답받았다. 분명히 똑같은 코드 그대로 한시간 넘게 헤매던 문제였는데 역시 코딩은 알다가도 모르겠다.......

해결되지 않았을 땐 이유를 찾다가 낸 결론이 이랬다.

  • async를 사용하지 않는 axios에선 .then .catch 같이 콜백을 통해서 응답 값을 보내줬기 때문에 확인할 수 있다.
  • async 를 사용한 코드에서는 axios.post를 사용하다가 에러가 발생. 자동으로 바로 catch로 기본값의 에러만을 전송했기 때문에 확인할 수 없었다.

하지만 역시 수많이 봐왔던 다른 코드들과 같이 try-catch를 이용한 async / await에서도 에러 핸들링을 완벽하게 사용 가능했다.

최종 코드

const registerEvent = async (id, name, password) => {
    try {
      const res = await axios.post('users/register', { id, name, password });
      ...
    } catch (err) {
      console.log('Register err : ', err.response);
      const statusCode = err.response.status; // 400
      const statusText = err.response.statusText; // Bad Request
      const message = err.response.data.message[0]; // id should not be empty
      console.log(`${statusCode} - ${statusText} - ${message}`);
      ...
    }
  };

나중에 확인해보니 그냥 타입문제인 거 같은데.. 에러코드나 로그 정말 제대로 안 읽었구나 싶다

profile
백엔드 개발자

0개의 댓글