보통의 개발자가 사용하는 axios

low레벨에서 매번 호출하면.. 동일한 설정을 계속적으로 복사&붙여넣기를 하게 되는 불편함이 있데이!!

 

우린 보통의 개발자니. 깔끔s하게 처리 하자.

 

아래와 같은 공통의 코드를 매번 복사&붙여넣기를 해야 한다.

 

1.access_token 만료가 되면 401이 발생한다.

2.refresh_token을 가지고access_token을 갱신한다.

3.refresh_token 까지 만료되면 로그인 페이지로 이동s 해야한다.

 

만약 공통으로 사용하지 않느다면?? 생각만 해도...아니 생각하지도 말지어다.!!

 

const  cookie = new Cookies();
const baseURL = process.env.REACT_APP_SERVER_URL;
const setHeader =()=>{
	return {
		'Content-Type': 'application/json'
		, 'Authorization': "Bearer " + cookie.get('access_token')
	}
}
const basePost =(path:string, requestData:{})=> {
	return  axios.create({
		baseURL: baseURL,
		headers: setHeader()
	}).post(path, requestData)
}

export default {
	post: function (path:string, requestData:{}, index?:string) {
		try {
			const self = this;
			return new Promise(function (resolve, reject) {
				basePost(path, requestData)
					.then(response => {
						if(response.status == 200) {
							index ? resolve(response.data[index]) : resolve(response.data);
						}
					}).catch(function (error) {
						console.log(error.response.status)
						if(error.response.status == 401){
							//  refresh_token 새로 시도 해보고!
							//  안되면 로그인 페이지 고고 TODO
						}
					});
			});
		}
		catch (e) {
			console.log(e);
		}
	},
    ...

서버에서 주는 응답 Key를 맞추면 index가 필요 없을텐데.. 설계의 중요성..

 

 

참고)) 각각의 API를 하나로 뭉치니...타입스크립트 아오ㅠㅠ!!  타입스크립트...참 깐깐하데이!!

 

이게 최선인가.. 의문이 들긴하지만 일단 Pass 

어떤 타입인지 알려준다...! 그럼 그림같이 컴파일 에러가 사라진다!

객체로 받는 친구들은 interface를 정의해서 알려준다.

 

재미지다!!

개인적으로 리액트 쿼리는 ....글쎄...