• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

반복문내 비동기 코드 처리에 대한 궁금증

20.12.13 13:13 작성 조회수 174

1

안녕하세요. HEROPY님 강의를 보면서 공부하다가 의문사항? 궁금사항이 생겨 질문남깁니다.

프로젝트의 store/movie.js를 보면 페이징 처리를 위해 한번에 Ajax 요청으로 받아오는게 10개뿐이므로 각 각의 요청을 나눠서

최대 30개까지 받을 수 있는데요. 그 과정에서 반복문내에서 Ajax 요청을 합니다. 

제가 궁금한게 반복문내에서 async, await를 사용하여 비동기 요청을하면 응답 순서가 반드시 지켜지는건가요?

이 질문을 드리는 이유는 예전에 비슷한 코드를 작성할 때 요청 순서가 서버 네트워크 상태에 따라서 뒤죽박죽인 경우가 있어서

고민했던 적이 있습니다. 그 때 당시에는 1) 한번에 들고오는 응답 갯수를 늘린다 2) 반복문내 요청에서는 동기 코드로 ajax 요청을 한

다( 매우 좋지 않은 방법이지만..) 이런 방식으로 해결하였던거 같습니다. 

사실 현재 프로젝트 상에서 순서를 안지키더라도 크게 문제가 없을 듯합니다만 궁금해서 질문드립니다.

답변 2

·

답변을 작성해보세요.

1

아 그런거였군요. 답변 감사합니당! 

1

hellofrontdev 님 안녕하세요~

역시 주말에도 공부하시는군요!

멋지십니다!

혹시 예전에 작성하셨다는 그 비슷한 코드에서 forEach나 map 등 콜백을 사용하는 반복을 쓰신 건 아닐까요?

forEach나 map 같이 콜백을 사용하는 반복은 구조적으로 응답을 기다릴 수가 없고,

결론적으로 강의 예제와 같이 구식의 for문을 사용하면 응답 순서를 기다릴 수 있습니다!

테스트를 위해서 완성 예제 화면을 축소한 후 최대 30개로 검색을 하시면,

응답(검색된 영화 목록)이 순서대로 빵.빵.빵. 찍히는 것을 보실 수 있습니다.

혹시 응답이 너무 빠르면 네트워크 속도를 줄여서(강의에 내용 있어요~) 테스트해 보시면 도움이 되지 않을까 하네요 :)