Javascript 반복문 비동기처리

pa324·2019년 8월 12일
1

Goal

  • Javascript 반복문에서 비동기처리를 할 수 있다.

Intro

map, forEach와 같은 array method의 callback을 async로 선언하면, 각 배열의 요소들을 await하게 된다.
하지만, map, forEach 그 자체를 await하지 않기 때문에 완전한 비동기처리가 이루어 지지는 않는다.

forEach 문을 사용한 async && await




function delay(item) {
  	return new Promise(resolve => 
               setTimeout(() => { 
      				console.log(item); 
      				resolve(); }, 1000) ); 
}

async function loop(array) {
	array.forEach( async (number) => {
	await delay(number);
	})
  	console.log('Done');
}
loop([1,2,3,4,5]);


---
 [결과] 
 'Done'
 undefined

for of // for 문을 사용한 async && await




function delay(item) {
  	return new Promise(resolve => 
               setTimeout(() => { 
      				console.log(item); 
      				resolve(); }, 1000) ); 
}

async function loop(array) {
	
    for(const number of array){
    	await delay(number);
    }
	console.log('Done');
}
loop([1,2,3,4,5]);



---
 [결과] 
1
2
3
4
5
'Done'
profile
안녕하세요

0개의 댓글