axios 여러 개 요청하기 (multiple request)

프로젝트 리뉴얼 과정에서 한 컴포넌트에 5개의 get api를 요청해야 해서 단순하게 생각했을 때는 useEffect에 api를 넣으면 된다고 생각했었지만

 

실제로 테스트해보았을 때 몇 가지 문제가 발생했었다.

• 불러온 값이 없다는 error 발생
• 순차적으로 불러오려니 시간이 오래 걸려 로딩이 느림
• 유지보수가 용이하지 않음

한꺼번에 api를 요청하는 방법은 없을까 찾아보니 axios.all을 사용하는 방법이 있다는 걸 알게 되었다.

 

기존에 axios와 크게 다르지는 않아서 좋았다.

import axios from "axios"
import { useEffect } from "react"

const Test = () => {
  const getAHandler = () => {
    return axios.get("/api/a").then((res) => res.data.result)
  }

  const getBHandler = () => {
    return axios.get("/api/b").then((res) => res.data.result)
  }

  useEffect(() => {
    axios.all([getAHandler(), getBHandler()]).then(
      axios.spread((a, b) => {
        console.log(a, b)
      }),
    )
  }, [])

  return <div></div>
}

export default Test

 

자세한 건 가이드 참고

사용법 | Axios 러닝 가이드

 

나중에 까먹지 않게 메모메모