더 알아보기/기능
axios 여러 개 요청하기 (multiple request)
은돌1113
2023. 3. 30. 17:21
프로젝트 리뉴얼 과정에서 한 컴포넌트에 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
자세한 건 가이드 참고
나중에 까먹지 않게 메모메모