useEffect에서 api 반복문

Question

(68,101) (67,100) 이런식으로 순서대로 들어가서 순서대로 API 결과값이 출력이 되어야 하는데API 응답이 빨리 돌아 온 순서대로 결과값을 반환해서 문제입니다.전에 ajax에서는는 익명함수를 이용해서 처리 했는데axios에서는 어떻게 처리 해야 되는지 모르겠습니다... var sidoName&#61;['관평동','월평동','둔산동','정림동','문창동','노은동']; var nx&#61;[68,67,67,67,68,61]; var ny&#61;[101,100,100,99,100,101];useEffect(() &#61;> { for(var i &#61; 0; i <sidoName.length; i&#43;&#43;){ var x&#61;nx[i]; var y&#61;ny[i]; axios.get(&#96;https://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtNcst? serviceKey&#61;j%2BeGiHULsv%2BdiOnKQNSpTPwFQ2F1qUI%2FWbwdVHKKQ%2FnCoHSgwx4RKmAJ%2F%2FTRrtgY1tghJ%2BUMVTGJRYG5VEIK5A%3D%3D&pageNo&#61;1&numOfRows&#61;1000&dataType&#61;JSON&base_date&#61;20230202&base_time&#61;0600&nx&#61;${x}&ny&#61;${y}&#96;) .then(response &#61;> { console.log(response.data.response.body.items.item[0].nx &#43; &#34; &#34; &#43;response.data.response.body.items.item[0].ny) setApiData(response.data.response.body.items); }); } }, []);

chief · Answer

완료 순서가 보장되지 않는 경우에 결과값의 순서를 실행했던 것과 같이 보장하려면 반복문을 통해 axios.get 요청을 보내는 것이 아니라 axios.all 을 통해 axios.get 을 묶어서 보내는 방법을 사용하시면 될 것 같습니다. 참고로 axios 요청도 Promise 이기 때문에 Promise.all 을 통해 결과 데이터의 순서를 보장 받는 것과 거의 비슷합니다.

useEffect에서 api 반복문

1개의 답변

#front-end 목록