Axios Interceptor

Vue2 환경에서 작업을 하다가, 페이지 내 Axios 호출되는 곳에서 특정 문자를 변경해줘야 하는 문제가 있었다.
이를 위해서 SPA 페이지 내부에서 작업을 해줬었는데,
Axios Interceptor를 통해 한번에 처리할 수 있는 방법이 있었다.

Axios Interceptor의 메타 데이터 중, config.transformResponse를 활용하는 방식이다.
나는 특정 url을 포함하는 경우에만 해당 작업을 적용 시키기 위해서 다음과 같은 형식으로 작성했다.

이때 if절에서 response.config.transformResponse를 통해 데이터가 try/catch에 도달하기 전에 데이터 변환 작업을 해줄 수 있다.

Axios config에 대한 안내는 여기서 확인! https://axios-http.com/kr/docs/req_config

요청 Config | Axios Docs

필요에 의해 transformResponse만 확인했지만, 다른 여러 config옵션들이 있어 확인해 보면 많은 도움이 될 것 같다.

export default function axiosInterceptor() {
	axios.interceptors.request.use(
    	//....request 처리 구문
    );

    axios.interceptors.response.use(
        function(response) {
            const config = response.config;


            if (config.url.includes('url포함문자') 
            && config.transformResponse 
            && config.transformResponse.length > 0) {
                response.data = changeDataFormat(response.data.data);
            }

            return response;
    }, function(err) {
            //에러 처리 구문...
        }
    );
}


//동일 페이지 내 method 작성시
function changeDataFormat(data) {
    //...function 내용
}

 

같은 페이지 내의 하단에 function을 추가해 실행해 주게 됐으나, 다른 페이지에서 작업 후에 import 해서 사용도 가능했다.

import importedComponent from "../../components/element/importedComponent";

	//... 생략
	response.data = importedComponent.methods.changeDataformat(config.data);
    //... 생략

 

이 말이 너무 생각나는 경험이다.
Work Wiser, not Harder 😅