Promise.all / Promise.race

[Javascript/자바스크립트] Promise.all / Promise.race

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 을 사용해야 한다.

Promise.all

🚨 Promise.all 을 사용할 때에는 등록한 프로미스 중 하나라도 실패하면, 모든게 실패한 것으로 간주한다.

async () {
    const results = await Promise.all([/*함수가 배열로 담긴다.*/]);
    console.log(results); // 배열에 담긴 함수가 실행된 값이 results 에 배열로 담긴다.
}

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()]); // results 에는 반환된 Promise 값이 담긴다.
  console.log(results);
}

process();

실행하면 세 개의 함수가 동시에 작업이 시작되면서, 가장 늦게 걸리는 3초 뒤에 콘솔창에 results 가 찍히는 것을 볼 수 있다.

** 작업이 걸린 시간을 확인하는 방법 (Date.now( ) 를 이용)

async function process() {
  const start = Date.now(); // 함수가 시작되는 시간
  const results = await Promise.all([getDog(), getRabbit(), getTurtle()]); // results 에는 반환된 Promise 값이 담긴다.
  console.log(Date.now() - start); // results가 콘솔창에 찍히기까지 걸리는 시간
  console.log(results);
}

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

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();

Promise.race

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

🚨 Promise.race 의 경우엔 다른 Promise 가 먼저 성공하기 전에 가장 먼저 끝난 Promise 가 실패하면 이를 실패로 간주한다. 따라서 다음 코드에서 getRabbit 에서 에러를 발생시킨다면 에러를 잡아낼 수 있지만, getTurtle 이나 getDog 에서 발생한 에러는 무시된다.

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([
    getDog(),
    getRabbit(),
    getTurtle()
  ]);
  console.log(first);
}

process();
// 토끼 *** 토끼가 실행시간이 가장 빠르므로

개발하면서 Promise.all 은 쓸 일이 많지만, Promise.race 의 경우에는 쓸 일이 많진 않다.

Promise.all

Promise.race

티스토리툴바