[JS] axios 멀티 리퀘스트 보내기 (axios.all, axios.spread)

하나의 컴포넌트에서 멀티 리퀘스트를 보내기 위해 처음에는 함수 두 개를 사용했다. 그러다 보니 유지 보수도 힘들어지고 가독성도 안 좋아졌다.

어떻게 한 곳에서 api들을 모아놓을 수 없을까? 해답은 axios.all 과 axios.spread를 사용하면 된다. axios.all에서 값이 배열 형태로 들어가기 때문에 axios.spread에서는 인자 순서를 잘 지켜줘야 된다.

마지막으로 해당 인자에 맞는 값으로 호출을 하면 끝. 아래 코드로 보면 이해하기 쉬울 것이다. export const GetDateImg_0 = ({ setStillCut_0, setOriginImg_0, setRecordDate_0, }) => { const data = async () => new Promise((resolve) => { axios .all([ axios.post("http://path/apiName_0"), axios.post("http://path/apiName_1"), ]) .then( ...