반응형
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();
반응형
'개발' 카테고리의 다른 글
마이크로서비스 아키텍처: 성공적인 구현을 위한 5가지 핵심 전략 (0) | 2023.05.23 |
---|---|
클래스 기반 컴포넌트 인터페이스 선언 시 초기화하기 (0) | 2023.05.03 |
Vue Class based component 클래스 기반 컴포넌트에서 Vuex store 설정 (0) | 2023.05.03 |
NPM 프라이빗 레포지토리 설치 (0) | 2023.05.02 |