인프런 커뮤니티 질문&답변
작성한 질문수
반복문내 비동기 코드 처리에 대한 궁금증
해결된 질문
20.12.13 13:13 작성
·
237
1
안녕하세요. HEROPY님 강의를 보면서 공부하다가 의문사항? 궁금사항이 생겨 질문남깁니다.
프로젝트의 store/movie.js를 보면 페이징 처리를 위해 한번에 Ajax 요청으로 받아오는게 10개뿐이므로 각 각의 요청을 나눠서
최대 30개까지 받을 수 있는데요. 그 과정에서 반복문내에서 Ajax 요청을 합니다.
제가 궁금한게 반복문내에서 async, await를 사용하여 비동기 요청을하면 응답 순서가 반드시 지켜지는건가요?
이 질문을 드리는 이유는 예전에 비슷한 코드를 작성할 때 요청 순서가 서버 네트워크 상태에 따라서 뒤죽박죽인 경우가 있어서
고민했던 적이 있습니다. 그 때 당시에는 1) 한번에 들고오는 응답 갯수를 늘린다 2) 반복문내 요청에서는 동기 코드로 ajax 요청을 한
다( 매우 좋지 않은 방법이지만..) 이런 방식으로 해결하였던거 같습니다.
사실 현재 프로젝트 상에서 순서를 안지키더라도 크게 문제가 없을 듯합니다만 궁금해서 질문드립니다.
답변 2
1
1
2020. 12. 13. 14:21
hellofrontdev 님 안녕하세요~
역시 주말에도 공부하시는군요!
멋지십니다!
혹시 예전에 작성하셨다는 그 비슷한 코드에서 forEach나 map 등 콜백을 사용하는 반복을 쓰신 건 아닐까요?
forEach나 map 같이 콜백을 사용하는 반복은 구조적으로 응답을 기다릴 수가 없고,
결론적으로 강의 예제와 같이 구식의 for문을 사용하면 응답 순서를 기다릴 수 있습니다!
테스트를 위해서 완성 예제 화면을 축소한 후 최대 30개로 검색을 하시면,
응답(검색된 영화 목록)이 순서대로 빵.빵.빵. 찍히는 것을 보실 수 있습니다.
혹시 응답이 너무 빠르면 네트워크 속도를 줄여서(강의에 내용 있어요~) 테스트해 보시면 도움이 되지 않을까 하네요 :)