axios interceptors를 이용해서 axios와 관련 공통 로직을 재활용하기

React에서 axios를 이용해서 API를 요청할 때 보통

...
const res = await axios.post('http://some-domain.com/api/~~~', {
	first: '김',
    second: '혜림',
})
...

이런식으로 요청을 한다.

그런데 어떤 프로젝트에서는 모든 API에서 로그인여부를 체크하고, Authorization 토큰값을 체크해야 하는 경우가 있다.

어떤 프로젝트에서는 모든 API의 응답에서 무조건 JSON.parse(response) 를 실행해 주어야 할 수도 있다.
( JSON.parse() 는 JSON 문자열을 JavaScript 객체로 변환해주는 JSON 내장 객체이다)

이런 경우에 모든 Axios 요청마다 같은 코드를 쓰지 않고,
axios.interceptors로 API 요청 후 실행되는 공통적인 로직을 분리해줄 수 있다.

const hyerimHttp = axios.create(
	baseURL: 'https://some-domain.com',
    timeout: 5000,
    headers: {'X-Custom-Header': 'foobar'}
)

// Axios 요청 실행에 대한 로직을 처리한다. 
hyerimHttp.interceptors.request.use(
	(config)=>{
		return config;
	}, 
    (error)=>{
    	return Promise.reject(error);
    }
);

//Axios 응답을 받은 이후의 공통 로직을 작성한다.
hyerimHttp.interceptors.response.use(
	(response)=>{
    	// 모든 Axios 요청에서 성공 응답을 받으면 문자열인 응답 데이터를 자바스크립트의 객체로 변환한다. 
    	const res = JSON.parse(response.data);
        return res;
    },
    (error)=>{
    	// 모든 Axios 요청에서 Error 응답을 받으면 콘솔에 error를 찍어준다. 
    	console.log(error); 
    	return Promise.reject(error);
    }
)
//

추가로 axios.create를 통해 내가 재사용할 axios객체를 만들었다.

보통 한 프로젝트에서 API 의 Root URL이 동일하기 때문에,
axios.create를 이용해서 Root URL의 반복적인 코드 작성을 막을 수 있다.

axios.post('https://some-domain.com/api/',{...}) 대신 hyerimHttp.post('/api',{...}) 이렇게 작성하게 되면,

모든 Axios 요청에서 5초동안 응답이 오지 않으면 Axios Error 를 return 하도록 설정해줄 수 있다.
또한 반복되는 URL부분은 BaseUrl 부분으로 설정해서 같은 코드의 작성을 피할 수 있고,
테스트 URL 과 실제 배포 URL이 다른 경우에 BaseURL만 바꾸면 되서 매우 편리하다.