[JS] error 처리를 switch문으로 깔끔하게 처리해보자 (feat: Axios)

보통 error에 대한 처리는 if...else if 문으로 작성하는 편이라
코드 내 중괄호들을 한짝 한짝 눌러가며 잡히는 블록으로 이해하느라 힘들었는데

오늘 코파일럿으로 에러 상태값을 좀 더 보기 쉽게 개선할 수 있는 방향을 물어보다 발견한!!!
switch문으로 깔끔하게 처리하는 코드... 🌟

<script setup>
import axios from 'axios';

const instance = axios.create({
    baseURL: 'https://your-api-url.com',
});

instance.interceptors.response.use(
  // response  
  	function (response) {
        if (response.status !== 200) {
            throw new Error('Server responded with non-200 status code');
        }
        return response;
    },
  
  // error
    function (error) {
        if (error.response) {
            switch (error.response.status) {
                case 400:
                    console.error('Bad Request');
                    break;
                case 401:
                    console.error('Unauthorized');
                    break;
                case 403:
                    console.error('Forbidden');
                    break;
                case 404:
                    console.error('Not Found');
                    break;
                default:
                    console.error('An error occurred');
            }
        }
        return Promise.reject(error);
    }
);

export default instance;
</script>

switch문 안에서 case 별로 상태값을 지정해두니 가독성이 미쳤다. 두고두고 써야지~!!

물론 저기서 추가적인 로직을 넣을 수 없다는 단점이 있지만... 그래도 저 정도면 뉴비 개발자의 눈이 반짝일 수 밖에 없었다.

그나저나 switch문도 멋진데 response의 response.status !== 200 조건도 오?하게 만들었다.

이래서 자꾸 하나에 묶이지 말고 생각의 전환을 하라는 말인가 보다. 🥲