Hyeonjeong Lee

Junior Web Developer

JavaScript - Promise 비동기 처리하기 - 2

Promise.all Promise.race알아보기


서버와 연결을 하다보면 한페이지에서 필요한 데이터가 많은경우 동시에 가져와야 하는 경우가 종종 있다. 데이터를 동시에 가져와야하는 일이 종종 있었다. 예를들어 회원정보가 연결된 데이터는 동기적인 작업이 필요한 부분이지만 최근작성된 공지사항, 자유게시판 같은 글은 회원정보와 연결되지 않은 독립적인 정보들은 병렬처리하여 호출하는 것이 훨씬 빠를 것이다.


이때 필요한 비동기처리가 바로 Promise.all

Promise.all

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 5000, "last");
});
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
  setTimeout(reject, 100, "err");
  //reject인경우 Promise.all은 err를 반환함
});

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values);
  })
  .catch((e) => {
    console.log(e);
  });

[ 결과 ]

  • 가장 늦게 종료되는 Promise객체(Promise1)가 끝난후에 values 값이 출력된다.
  • return 값이 모두 배열로 처리된다.
  • 단, 하나라도 err가 발생하는 경우 모두 에러 처리되며 then 구문은 처리되지않는다.

JSFiddle에서 실행해보기

Promise.race

Promise.race는 단어에서 보여지는대로 가장 먼저 끝나는 Promise가 출력된다. 사실 프로젝트를 진행하면서 가장 먼저 끝나는 Promise가 필요햇던적은 없는것 같다. 강의에서도 실무에서 그렇게 많이 사용되지 않는다고한다. 

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, "one");
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "two");
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});

[ 결과 ]

  • 가장 빨리 끝나는 two가 출력된다.
  • 가장 빨리 끝나는 함수가 err가 나는 경우에만 에러처리가 된다.

JSFiddle에서 실행해보기
사실 Promise.all같은 경우에는 지금 내 프로젝트에도 바로 적용시킬 수 있을 것 같은데 Promise.race같은 경우는 아직 사실 어느 상황에서 써야하는 지 감이 안온다. 더 많은 예제를 접하거나 race를 사용하는 경우가 명확한 경우라면 확실히 이해할 수 있을 것 같다.

참고 문서

참고