JavaScript- Promise all 와 Promise race

1. Promise all

 

1) Promise all을 사용하지 않은 경우

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const getDog = async () => {
  await sleep(1000);
  return '멍멍이';
};

const getRabbit = async () => {
  await sleep(500);
  return '토끼';
};
const getTurtle = async () => {
  await sleep(3000);
  return '거북이';
};

async function process() {
  const dog = await getDog();
  console.log(dog);
  const rabbit = await getRabbit();
  console.log(rabbit);
  const turtle = await getTurtle();
  console.log(turtle);
}

process();

현재 위 코드에서는 getDog 는 1초, getRabbit 은 0.5초, getTurtle 은 3초가 걸리고 있다. 이 함수들을 process 함수에서 연달아서 사용하게 되면서 process 함수가 실행되는 총 시간은 4.5초가 된다.

 

실행 결과

지금은 getDog -> getRabbit -> getTurtle 순서대로 실행이 되고 있는데 하나가 끝나야 다음 작업이 시작하고 있는데, 동시에 작업을 시작하고 싶다면 아래와 같이 Promise.all 을 사용해야한다.

 

 

2) Promise all을 사용한 경우

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const getDog = async () => {
  await sleep(1000);
  return '멍멍이';
};

const getRabbit = async () => {
  await sleep(500);
  return '토끼';
};
const getTurtle = async () => {
  await sleep(3000);
  return '거북이';
};

async function process() {
  const results = await Promise.all([getDog(), getRabbit(), getTurtle()]); // Promise all 사용
  console.log(results);
}

process();

실행 결과

리스트에 담겨서 동시에 출력 되는 것을 볼 수 있다.

만약에 여기서 아래와 같이 배열 비구조화 할당 문법을 사용한다면 각 결과값을 따로 따로 추출해서 조회 할 수 있다.

 

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const getDog = async () => {
  await sleep(1000);
  return '멍멍이';
};

const getRabbit = async () => {
  await sleep(500);
  return '토끼';
};
const getTurtle = async () => {
  await sleep(3000);
  return '거북이';
};

async function process() {
  const [dog, rabbit, turtle] = await Promise.all([
  // 객체 비구조화 할당 사용
    getDog(),
    getRabbit(),
    getTurtle()
  ]);
  console.log(dog);
  console.log(rabbit);
  console.log(turtle);
}

process();

실행 결과

 

 

2. Promise race

Promise race는 Promise.all 과 달리 여러개의 프로미스를 등록해서 실행했을 때 가장 빨리 끝난것 하나만의 결과값을 가져온다.

 

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const getDog = async () => {
  await sleep(1000);
  return '멍멍이';
};

const getRabbit = async () => {
  await sleep(500);
  return '토끼';
};
const getTurtle = async () => {
  await sleep(3000);
  return '거북이';
};

async function process() {
  const first = await Promise.race([
  // Promise.race 사용
    getDog(),
    getRabbit(),
    getTurtle()
  ]);
  console.log(first);
}

process();

실행 결과