[TIL] 2023/06/11

• forEach or map은 비동기 순차처리를 하지 못한다 :
  애초에 for문이 아니면 map, forEach 등은 async, await 에 대한 순차처리를 하지 못한다. 단지 for 문처럼 블록안의 문을 순차적으로 실행할 뿐, await를 기다리지 않는다. 따라서

function test() {
    const promiseFunction = () =>
        new Promise((resolve) => setTimeout(() => resolve("result"), 1000));
  
    Array(10)
        .fill(0)
        .forEach(async () => {
            const result = await promiseFunction();
            console.log(result);
        });
}

test();

위와 같이 친다고 1초에 한번씩 result를 출력하지 않고, 한번에 result가 10개 출력된다

그래서 원하는 구현을 하려면 async, await를 즉, 비동기를 기다리는 for of or for 문을 써야한다. 하지만, 알다시피 for문은 병렬처리를 하지 않기 때문에, 즉, 모든 비동기 처리를 기다리면서 순차 처리를 하기 때문에 만약에 순서가 중요하지 않아서 병렬처리를 하고 싶으면 PromiseAll 등을 써서 하면 된다. 아래는 for문으로 순차처리를 비동기로 할 수 있는 예시다.

async function test() {
    const promiseFunction = () =>
        new Promise((resolve) => setTimeout(() => resolve("result"), 1000));
  
    const arr = Array(10).fill(0);
    for(let el of arr) {
        const result = await promiseFunction();
            console.log(result);
    }
}

test();