Promise all

Promise 클래스에는 5가지 정적 메서드가 있습니다 . 이번 챕터에선 다섯 메서드의 유스 케이스에 대해서 빠르게 알아보겠습니다.

Promise.all

여러 개의 프라미스를 동시에 실행시키고 모든 프라미스가 준비될 때 까지 기다린다고 해봅시다.
복수의 URL 에 동시에 요청을 보내고 , 다운도르가 모두 완료된 후에 콘텐츠를 처리할 때 이런 상황이 발생합니다.
Promise.all 은 이럴때 사용할 수 있습니다.

문법:

let promise = Promise.all([...promise...]);

Promise.all 은 요소 전체가 프라미스인 배열(엄밀히 따지면 이터러블 객체이지만, 대개는 배열임)을 받고 새로운 프라미스를 반환합니다.

배열 안 프라미스가 모두 처리되면 새로운 프라미스가 이행되는데 ,배열 안 프라미스의 결과값을 담은 배열이 새로운 프라미스의 result 가 됩니다.

아래 promise.all 은 3초 후에 처리되고 , 반환되는 프라미스의 result 는 배열[1,2,3] 이 됩니다.

Promise.all([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000))  // 3
]).then(alert); 
// 프라미스 전체가 처리되면 1, 2, 3이 반환됩니다. 각 프라미스는 배열을 구성하는 요소가 됩니다.

배열 result 의 요소 순서는 Promise.all 에 전달되는 프라미스 순서와 상응한다는 점에 주목해 주시기 바랍니다. Promise.all 의 첫 번째 프라미스는 가장 늦게 이행되더라도 처리 결과는 배열의 첫 번째 요소에 저장됩니다. 작업해야 할 데이터가 담긴 배열을 프라미스 배열로 매핑하고 , 이 배열을 Promise.all 로 감싸는 트릭은 자주 사용됩니다.

예시로 확인해보자

export default function PromiseAllpage() {
  const onClickPromise = async () => {
    console.time("Promise시작!!");
    const result1 = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("https://dog1.jpg");
      }, 3000);
    });
    console.log(result1);
    // aaa = 철수가 된다 .

    const result2 = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("https://dog2.jpg");
      }, 1000);
    });
    console.log(result2);

    const result3 = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("https://dog3.jpg");
      }, 2000);
    });
    console.log(result3);
    console.timeEnd("Promise시작!!");
  };

  // 프로미스를 기다리는게 await 이 된다 .

  const onClickPromiseAll = async () => {
    // 배열 형태로 들어가게 된다 .
    // 1. 하나하나씩 확인 하는 방법.
    // console.time("promise.all 시작!!!");
    // const result = await Promise.all([
    //   new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       resolve("https://dog1.jpg");
    //     }, 3000);
    //   }),

    //   new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       resolve("https://dog2.jpg");
    //     }, 3000);
    //   }),

    //   new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       resolve("https://dog3.jpg");
    //     }, 3000);
    //   }),
    // ]);

    // console.log(result);
    // console.timeEnd("promise.all 시작!!!");
    // // 주석 하나하나씩 확인하는 방법.

    // 2. 한방에 확인하는 방법!!
    console.time("promise.all 시작!!!");
    const result = await Promise.all(
      ["https://dog1.jpg", "https://dog2.jpg", "https://dog3.jpg"].map(
        (el) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve(el);
            }, 3000);
          })
      )
    );
    console.log(result);
    console.timeEnd("promise.all 시작!!!");
  };

  return (
    <div>
      <button onClick={onClickPromise}>Promise 연습하기</button>
      <button onClick={onClickPromiseAll}>Promise.all 연습하기!! </button>
    </div>
  );
}