[JS] 비동기 함수(모드)에서 루프를 동기로 동작시키기
- 자바스크립트 async mode loop change to sync
* 비동기로 동작
[...Array(2).keys()].map(async (el, i) => {
console.log('1', i);
await new Promise(resolve => setTimeout(resolve, 500));
console.log('2', i);
await new Promise(resolve => setTimeout(resolve, 500));
console.log('3', i);
});
console.log('완료-1');
- 결과
1 0
1 1
완료-1
2 0
2 1
3 0
3 1
//-------------------------------------
* 동기로 변환
- Promise.all 사용, map 만 가능 (forEach, some 등은 불가)
- 주의 ! 동시에 실행됨
await Promise.all([...Array(2).keys()].map(async (el, i) => {
console.log('1', i);
await new Promise(resolve => setTimeout(resolve, 500));
console.log('2', i);
await new Promise(resolve => setTimeout(resolve, 500));
console.log('3', i);
}));
console.log('완료-2');
- 결과
1 0
1 1
2 0
2 1
3 0
3 1
완료-2
//-------------------------------------
* 모두 순차 실행
- for 사용
for (let v of [...Array(2).keys()]) {
console.log('1', v);
await new Promise(resolve => setTimeout(resolve, 500));
console.log('2', v);
await new Promise(resolve => setTimeout(resolve, 500));
console.log('3', v);
}
console.log('완료-3');
- 결과
1 0
2 0
3 0
1 1
2 1
3 1
완료-3