forEach 순차처리의 불가능 (for문, for of문의 순차처리)

1. 설명

Javascript에서 forEach문을 사용하였는데 await 임에도 불구하고 순차처리가 진행되지 않았다.

forEach는 Array의 요소들을 차례대로 돌며 async 메소드를 실행할 뿐이었다.

forEach는 callback으로 async 메소드들을 실행만 시켜줄뿐 기다려주지 않는다.

그로인해 순차처리가 아닌 병렬처리가 되었다.

 

2. 첫번째 대안, for문 사용

for문을 사용하는 메소드에 async 붙여줘도 되지만, 아래 코드처럼 for문을 async로 감싸줘도 된다.

참고로 forEach문을 async로 감싼다고 순차처리가 되지는 않는다.

 

기존 forEach문

set value(value: any) {
    if(value){
        value.forEach(async (item : number) => {
            const user = await Server.get(`/user/get/${item}`);
            this.createManager(user);
        });
    }
}

 

for문으로 변경

set value(value: any) {
    if(value){
        (async () => {
            for(let i = 0; i < value.length; i++){
                const user = await Server.get(`/user/get/${value[i]}`);
                this.createManager(user);
            }
        })();
    }
}

 

3. 두번째 대안, for of문

for of 반복문은 ES6에서 추가된 새로운 컬렉션 전용 반복문이다.

 

for of문으로 변경

for(let item of value){
    const user = await Server.get(`/user/get/${item}`);
    this.createManager(user);
}

 

4. 세번째 대안, Promise.all()

비동기 작업 시간이 길다면, 순차처리 대신, 병렬처리를 고려할 수 있다.

이는 각 비동기 함수들을 Promise 배열에 넣고, Promise.all() 메소드를 통해 비동기 함수들을 동시에 실행시킨다.