[React] axios - request 여러 개 요청하기 (multiple request)

axios 라이브러리를 사용할 때 동시에 여러 개의 request를 보내는 방법에 대해 알아보겠습니다.

다음과 같이 하나의 함수에서 동시에 여러 개의 request를 보내고 싶습니다.

const [postList, setPostList] = useState({ my: [], heart: [], temp: [] });

const getPostList = async () => {
	await axios
      .get(process.env.REACT_APP_DB_HOST + "/api/postList")
      .then((response) => {
        setPostList({ ...postList, my: response.data.reverse() });
      })
	  .catch((error) => {
		alert(error);
	  });

    await axios
      .get(process.env.REACT_APP_DB_HOST + "/api/heartPostList")
      .then((response) => {
		setPostList({ ...postList, heart: response.data.reverse() });
      })
      .catch((error) => {
        alert(error);
      });

    await axios
      .get(process.env.REACT_APP_DB_HOST + "/api/temporaryPostList")
      .then((response) => {
        setPostList({ ...postList, temp: response.data.reverse() });
      })
      .catch((error) => {
        alert(error);
      });
  };

그런데 저렇게 작성하면 제대로 동작하지 않습니다. (정확한 이유는 모르겠습니다)
axios의 multiple request 기능을 통해 해결해보겠습니다.

await axios
	.all([
    	axios.get(process.env.REACT_APP_DB_HOST + "/api/postList"),
    	axios.get(process.env.REACT_APP_DB_HOST + "/api/heartPostList"),
    	axios.get(process.env.REACT_APP_DB_HOST + "/api/temporaryPostList"),
	])
    .then(
    	axios.spread((res1, res2, res3) => {
    		setPostList({
    			my: res1.data.reverse(),
    			heart: res2.data.reverse(),
    			temp: res3.data.reverse(),
    		});
    	})
    )
    .catch((error) => {
    	alert(error);
    });

아주 좋군요.

---

참고

https://velog.io/@sorin44/React-axios-multi-request