88 현재 api 구조 - 토스트 팝업 뜨는 구조 이해하기 (ㅇㄹ등록메시지 일치할 때)

source: categories/study/vue-experiance/vue-experiance_9-88.md

88 현재 api 구조 - 토스트 팝업 뜨는 구조 이해하기 (ㅇㄹ등록메시지 일치할 때)

import axios from 'axios';

const config = {
	baseURL: process.env.VUE_APP_BASE_URL,
	// withCredentials: true,
	timeout: 60 * 1000,
	headers: {
		'Content-Type': 'application/json; charset=utf-8',
	},
};

const instance = axios.create(config);

instance.interceptors.request.use(
    // 요청 전에 인터셉터해서 이 안에 코드 실행
    // ...
)

instance.interceptors.response.use(
    // 응답 내보내기 전에 인터셉터해서 이 안에 코드 실행
    // ...

    if (error.response.status === 500) {
        const debounce = debounceGenerator.getInstance('500');
        const { code, message } = error.response.data;

        // 5100 - 파트생성개수 초과
        const exceptionCode = ['5000', '5020', '5100', '5200', '5210', '5270'];
        if (exceptionCode.every(item => String(code) !== item)) {
            debounce(() => {
                alert('error message : ' + error.response.data.message);
            });
        }

        // 일반 alert처리
        const alertCode = ['5270'];
        if (alertCode.some(item => String(code) === item)) {
            debounce(() => {
                alert(error.response.data.message);
            });
        }

        // 5000, 5100 > 에러 메시지 토스트로 띄우기
        const toastCode = ['5000', '5100', '5020'];
        if (toastCode.some(item => String(code) === item)) {
            debounce(() => {
                Vue.toasted.show(message); // 여기서 토스트 팝업 띄움
            });
        }
    }
)