개발

typescript를 통한 Axios 클래스 초기화

코딩하는꽃개 2023. 5. 3. 22:31
반응형
import axios, {AxiosInstance} from 'axios'
import { auth } from '@/utils';

/**
 * Axios
 */
class Axios {
    // 인스턴스
    static instance: AxiosInstance | null = null;

    /**
     * 싱글톤 인스턴스
     */
    static getInstance() {
        // 인스턴스가 없으면 생성
        if(!this.instance) {
            // 인스턴스 생성
            this.instance = axios.create({
                baseURL: process.env.VUE_APP_SERVER_URL,
                timeout: 3000,
                withCredentials: true,
                headers: {
                    "Access-Control-Allow-Origin": "*",
                    "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
                    "Access-Control-Allow-Headers": "Origin, Content-Type"
                }
            });

            /**
             * 리퀘스트 인터셉터
             */
            this.instance.interceptors.request.use(
                /**
                 * 리퀘스트 성공 인터셉터 처리
                 * @param config 리퀘스트 설정
                 */
                function (config) {
                    console.debug("리퀘스트 성공 인터셉터")
                    console.debug(config)
                    return config;
                },
                /**
                 * 리퀘스트 실패 인터셉터 처리
                 * @param error 에러
                 */
                function (error) {
                    console.debug("리퀘스트 성공 인터셉터")
                    console.debug(error)
                    return Promise.reject(error);
                }
            );

            /**
             * 리스폰스 인터셉터
             */
            this.instance.interceptors.response.use(
                /**
                 * 리스폰스 성공 인터셉터 처리
                 * @param response 리스폰스
                 */
                function (response) {
                    console.debug("리스폰스 성공 인터셉터")
                    console.debug(response)
                    return response;
                },

                /**
                 * 리스폰스 실패 인터셉터 처리
                 * @param error 에러
                 */
                function (error) {
                    // 스테이터스 코드 패턴매칭
                    switch (error.response.status) {
                        // Unauthorized
                        case 401:
                            console.debug("권한이 부족합니다.");
                            break;
                        // 그 외 패턴
                        default:
                            console.debug("500 에러");
                            break;
                    }

                    return Promise.reject(error);
                }
            );

            return this.instance;
        }
        // 인스턴스가 존재한다면 반환
        else {
            return this.instance;
        }
    }
}

// 싱글톤 인스턴스 반환
export default Axios.getInstance();
반응형