Notice
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

흰둥씨의 개발장

[오늘의 React] axios multiple request 할 때 본문

[오늘의 공부]/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>...
    )
}
저작자표시 비영리 변경금지

'[오늘의 공부] > React.js' 카테고리의 다른 글

[오늘의 React] context API 상태관리  (0) 2023.03.05
[오늘의 React] Router  (0) 2023.03.05
[오늘의 React] Hooks  (0) 2023.03.05
[오늘의 React] 생명주기, VirtualDOM vs RealDOM , CRA , JSX문법, 웹팩 , 바벨, 컴포넌트, 이벤트처리, useState  (0) 2023.03.05
[오늘의 React] SPA MPA  (2) 2023.02.08
'[오늘의 공부]/React.js' Related Articles more