[오늘의 공부]/React.js
[오늘의 React] axios multiple request 할 때
돈워리비햅삐
2023. 2. 12. 01:44
axios로 get요청을 여러번 넘기는것이 가능하다고 해서 여러 블로그를 참고 하여서 아래와 같이 진행하였는데 안되었다...
export const Data = () => {
const [data, setData] = useState([]);
useEffect(() => {
const URL = `APIURL`;
axios
.all([axios.get(URL1), axios.get(URL2)])
.then(res1, res2 => {
let RES1 = res1;
let RES2 = res2;
let res = [..RES1,...RES2]
setData(res)
})
.catch(err => {
console.log(err)
})
}, []);
return data;
}위와 같이 작성하니까 자꾸 RES1하고 RES2가 이터러블 하지 않다고 에러가 떴다...
매우 많이 구글링을 했는데 위와 같은 코드만 보였음...
그러던 중 axios공식 문서에서 위와 같이 작성하는 코드는
axios.all(iterable) axios.spread(callback)형태로 작성해야 한다고 했다...
우선 이터러블이 아닌것같아서 더 axios사이트를 더 보니
Promise키워드를 이용하여 접근하라고 되어있었다..
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
Promise.all() - JavaScript | MDN
Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫
developer.mozilla.org
그래서 위 문서를 참고하여 다시 작성하니 멀티리퀘스트가 되었다
export const Data = () => {
const [data, setData] = useState([]);
useEffect(() => {
Promise.all([axios.get('URL1'), axios.get('URL2')])
.then(values => {
setData(values);
})
.catch(error => {
console.log(err)
});
}, []);
return (
<html>...
<data>...
)
}