[Javascript / React / Node ] async+await 과 axios - 파일분리 와 코드경량화

useEffect(()=>{
	const getApis = async () => {
    	await axios.get([LINK]).then(res => setState(res))
    }
    
    getApis();
})

기존에 위와같은 형식으로 api 를 불러오고 있었습니다.

하지만, 페이지가 많아지고 컴포턴트가 많아지다보니 이 렇게 api를 호출하는 코드를 따로 분리해서 모아야겠다는 생각이 많이 들었습니다.

  파일분리

getApis.js

import axios from 'axios';

const getApiData = async () => {
	await axios.get([LINK])
    			.then(res=>{
                	return res
                });
}


export {
	getApiData
}

pages.js

useEffect(()=>{
	getApis.then(res => console.log(res));
},[]);

처음에는 이런식으로  getApi.js 라는 파일을 만들었는데 문제가 있다는것을 알게 되었습니다.

 

getApi.js 에서는 값을 잘 받아오지만, pages.js 에서 로그를 찍어보니 undefined가 넘어옵니다.

그래서 무엇이 문제인지 찾기 시작하였습니다.

 

문제원인 발견

처음에는 전역변수로 apiData 라는 array형 변수를 선언했엇고,

이  getApi.js의 then 안에 return apiData 를 했는데 똑같았습니다.

 

다른 문서도 찾아보았지만 제가 원하는 답은 나오지 않았습니다.

그래서 커뮤니티에 저의 오류를 올렸고, 답변이 돌아왔었는데

 

문제는 getApiData 의 return 이 존재하지 않는다..

정말 기초적인 부분에서 오류가 나서 한동안 패닉에 빠졋습니다..ㅜㅜ

 

  Axios

문제를 해결하기 위하여 답변을 받고, 추가적인 코드 피드백까지 해주셧는데 정말 감사합니다.

 

제 코드를 보시면 axios를 이용해서 api를 호출하고 받아오는 방법을 사용하는데

 axios.get() 은 이미  Promise 형식으로 return 을 해주고 있습니다. 

.then을 이용해서 값을 받아오면  따로 async await 을 해주지 않아도 된다는 사실 ! 

 

하지만 저는  async await 을 사용하고 있었습니다.

크게 문제될 건 없지만 없어도 되는 부분이었습니다.

const res = await axios.get(...);
return res.data;

axios와 async+await 을 쓰는것은 위와같이 코드를 깔끔하게 작성하기 위함이라는 피드백까지 주셔서 정말 감사했습니다.

이 피드백을 참고하여 코드를 수정해서 문제를 해결하기로 하였습니다.

 

  문제 해결

아래와같은 코드로 수정을 하니 문제없이 잘 동작하였습니다.

 

getApis.js

import axios from "axios";

const getWaitResources = async () =>{
    const apiData = await axios.get(process.env.REACT_APP_SERVER_HOST+'/resources/wait')
    return apiData.data;
}


export {
    getWaitResources
};

 

이렇게 getApis.js 를 수정해주니 pages.js 에서는 깔끔하게 값이 잘 넘어오는것을 확인할 수 있었습니다.