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'