반응형
for await of 구문은 반복문 내부에서 실행되는 비동기 서비스들에 대한 순서를 보장해준다.
예를들어, 아래의 상황에서의 결과는
const names = ['a', 'b', 'c', 'd'];
names.forEach(async (name) => {
const result = await service.asyncTest(name);
console.log(result.json());
});
console.log('서비스 종료');
맨 마지막에 찍혀 있는 '서비스 종료' 라는 로그가 처음 찍히게 된다
모든 api 통신 완료
{"a":"end"}
{"b":"end"}
{"c":"end"}
{"d":"end"}
* forEach에서의 모든 비동기 작업에 대한 순서를 보장 하지 않는다.
때문에 for await of 문으로 아래와 같이 변경하면 해당 이슈는 해결 가능하다.
const names = ['a', 'b', 'c', 'd'];
for await (let name of names){
const result = await service.asyncTest(name);
console.log(result.json());
};
console.log('서비스 종료');
출력 결과는,
{"a":"end"}
{"b":"end"}
{"c":"end"}
{"d":"end"}
모든 api 통신 완료
반응형
'Front > JavaScript' 카테고리의 다른 글
css/js 파일 캐시 방지 (0) | 2021.01.22 |
---|---|
자바스크립트 코드 별 성능 비교 / 스코프 체인 (0) | 2020.08.31 |
특정일로 부터 날짜 계산 (JavaScript) (0) | 2020.07.28 |
웹 실행순서 (java > jstl > html > javascript) (1) | 2020.01.13 |
Web Storage(local, session) (0) | 2019.11.19 |