[책] 자바스크립트 코드 레시피 278 - 200일차

Promise 병렬 처리하기

• 비동기 처리 일괄 시작 후 모든 처리가 끝나면 다음 작업을 시작하고 싶을 때

구문

Promise.all(배열) 다수의 Promise 병렬 실행

설명

Promise.all()을 사용하면 동시에 실행한 처리를 모두 끝내고 다음 작업을 시작하도록 지정할 수 있습니다.

실습

Promise 인스턴스를 포함한 배열을 생성하여 Promise.all()의 인수로 전달합니다. 모든 처리가 끝난 뒤 then()으로 지정한 함수를 호출합니다. 병렬 처리는 배열의 순서대로 작업이 완료되지 않습니다.

const arrFunc = [];
for (let i = 0; i < 5; i++) {
  const func = (resolve) => {
    console.log(`처리${i} 시작`, new Date().toLocaleTimeString());
    const delayMsec = 2000 * Math.random();
    setTimeout(() => {
      console.log(`처리${i} 시작`, new Date().toLocaleTimeString());
      resolve();
    }, delayMsec);
  };
  arrFunc.push(func);
}
console.log(arrFunc);
const arrPromises = arrFunc.map((func) => new Promise(func));
console.log(arrPromises);
Promise.all(arrPromises).then(() => {
  console.log('모든 작업이 완료되었습니다.');
});

Promise 직렬 처리하기

• 외부 데이터를 가져와 후속 처리 작업에 사용하고 싶을 때

설명

처리가 끝난 데이터를 다음 작업에 이어서 사용하는 방법을 알아봅니다. 외부 데이터를 가져와 다음 처리에 연결할 때 유용합니다. Promise를 사용하는 방법과 await나 asyns를 사용해 처리하는 방법을 알아봅니다. 직렬 처리는 await와 async를 사용하는 것이 더 간단합니다.

실습 (Promise를 사용하는 방법)

Promise.resolve().then(() => new Promise((resolve) => {
  setTimeout(() => {
    console.log('첫 번째 Promise', new Date().toLocaleTimeString());
    resolve();
  }, 1000);
})).then(() => new Promise((resolve) => {
  setTimeout(() => {
    console.log('두 번째 Promise', new Date().toLocaleTimeString());
    resolve();
  }, 1000);
}))

실습 (Await와 async를 사용하는 방법)

start();
async function start() {
  await new Promise((resolve) => {
    setTimeout(() => {
      console.log('코드02', '첫 번째 Promise', new Date().toLocaleTimeString());
      resolve();
    }, 1000);
  });
  await new Promise((resolve) => {
    setTimeout(() => {
      console.log('코드02', '두 번째 Promise', new Date().toLocaleTimeString());
      resolve();
    }, 1000);
  });
}

Promise 동적 직렬 처리하기

• 비동기 처리를 순서대로 시작 후 모든 처리가 완료될 때까지 대기하고 싶을 때

설명

코드를 작성하면서 Promise의 실행 여부를 미리 알 수 있으면 앞에서 기술한 방식으로 코드를 사용할 수 있습니다. 하지만 동적으로 Promise의 수가 변하는 경우 해당 방식으로는 사용할 수 없습니다. 이 경우는 비동기 처리 실행의 함수를 배열에 보관하고, 루프문을 사용해 Promise와 await로 처리를 연결합니다. Promise는 인스턴스화한 순간 함수가 실행되므로, 실행 직전까지 인스턴스화하지 않는 것이 핵심입니다. 루프문에서 await는 Promise의 완료를 기다리므로 배열에 보관된 비동기 처리를 순서대로 실행합니다.

const listFunctions = [];
for (let i = 0; i < 5; i++) {
  const func = (resolve) => {
    setTimeout(() => {
      console.log(`함수${i}가 완료되었습니다.`, new Date().toLocaleTimeString());
      resolve();
    }, 1000)
  }
  listFunctions.push(func);
}
console.log(listFunctions);

execute();
async function execute() {
  for (let i = 0; i < listFunctions.length; i++) {
    const func = listFunctions[i];
    await new Promise(func);
  }
}