axios로 서버에 요청할 때 생기는 에러 처리 방법

axios.get은 프로미스를 리턴하고 await를 앞에 붙여주면

일반적인 프로미스에서 .then을 한 것과 같이 

요청이 끝날 때까지 기다렸다가 결과 값을 리턴한다.

 

만약 try 문 안의 서버 요청 과정에서 상태 코드가 200이 아닌 에러가 발생했을 경우 catch로 넘어가게 되는데

catch가 받는 ex 객체에는 request와 response가 있고

이를 이용해서 어떤 경우의 오류인지를 파악해

각 오류에 대한 대처를 할 수 있다.

 

try {

    const response = await axios.get("https://jsonplaceholder.typicodef.com/posts");

} catch (ex) {

    // ex.request 서버에 성공적으로 요청했을 때 설정됨

    // ex.response 서버에 성공적으로 응답을 받았을 때 설정됨

}

 

ex.request는 undefined로 되어 있다가 서버에 성공적으로 요청을 했을 때 설정된다.

request가 undefined라면 클라이언트에서 서버에 요청을 보내기도 전에 어떤 에러가 발생했다는 것을 알 수 있다.

 

ex.response는 undefined로 되어 있다가 서버에 성공적으로 응답을 받았을 때 설정된다.

response가 undefined라면 서버 응답을 받을 수 없는 어떤 에러가 발생했다는 것을 알 수 있다.

 

이를 이용해서 catch 문 안에 다음과 같이 expected 에러와 unexpected 에러를 나눠서 처리 해줄 수 있다.

 

try {

    await axios.delete(생략);

} catch (ex) {

    if (ex.response && ex.response.status === 404) {

        // 404 에러가 발생한 경우

        console.log('이미 지워진 글입니다.');

    } else {

        // unexpected 에러가 발생한 경우

        console.log('글을 지우는 과정에서 예상치 못한 에러가 발생했습니다.');

    }

}

 

expected errors : 클라이언트 에러, 400대 코드

unexpected errors : 네트워크 다운, 서버 다운, 데이터베이스 다운, 버그

 

 

Interceptors

 

다음의 interceptors를 활용하면

request나 response가 성공하거나 실패할 때마다 호출되는 함수를 쓸 수 있다.

에러 처리의 중복을 줄여주는 용도로 사용한다.

 

axios.interceptors.response.use(success, error);

// success는 성공했을 때 호출되는 함수

// error는 에러가 생겼을 때 호출되는 함수

 

axios.interceptors.response.use(success, error => {

    // error.response.status를 가져올 수 있다.

});