Front-end/JavaScript

JS 비동기 5편 - parallel, race, sequencial

파리외 개발자 2023. 4. 13. 21:58

parallel, race, sequencial은 promise 다중처리를 할 때의 정책이다.

promise 다중처리

//3 promise
const promisify = (item, delay) =>
  new Promise((resolve) => setTimeout(() => resolve(item), delay));

const a = () => promisify("a", 100);
const b = () => promisify("b", 5000);
const c = () => promisify("c", 3000);

api통신들이 시간차를 두고 도착하는 것을 명확하게 보이기 위해서

promise를 setTimeout에 의해 실행되도록 했다.

parallel

//parallel
async function parallel() {
  const promises = [a(), b(), c()];
  const [output1, output2, output3] = await Promise.all(promises);
  return `parallel is done: ${output1} ${output2} ${output3}`;
}

parallel().then(console.log);

parallel은 모든 api가 실행될 때까지 기다린다.

제일 오래 걸리는 b까지 기다렸다가 실행되므로

parallel은 5초 이후에 실행된다.

race

//race
async function race() {
  const promises = [a(), b(), c()];
  const output1 = await Promise.race(promises);
  return `race is done: ${output1}`;
}

race().then(console.log);

race는 가장 먼저 도착하는 api만 실행한다.

a는 0.5초 밖에 걸리지 않으므로 

race는 0.5초 만에 제일 빨리 도착한 a만 실행시키고 끝난다.

sequencial

//sequencial
async function sequence() {
  const output1 = await a();
  const output2 = await b();
  const output3 = await c();
  return `sequence is done ${output1} ${output2} ${output3}`;
}

sequence().then(console.log);

sequencial은 parallel과 마찬가지로 모든 api가 끝났을 때 실행된다.

하지만 sequencial은 parallel보다 오래 걸린다.

parallel은 api를 동시실행시킨 후 결과를 받지만

sequencial은 순차적으로 실행시킨다.

따라서 sequencial은 위 상황에서 8.5초 이상 걸린다.

세 가지 정책의 속도차이

//Who is fastest?
parallel().then(console.log);
race().then(console.log);
sequence().then(console.log);

위 코드를 실행시켜 세 정책의 속도를 비교해 본다.

예상되는 속도는 race > 0.5s, parallel > 5s, sequencial > 8.5s

이며, 예상과 같은 결과가 나온다.