promise all

여러 promise 결과를 집계할 때 유용하다
서로 연관된 비동기 작업을 모두 수행해야할 때 사용

입력 값으로 들어온 promise 중 하나라도 거부당하면 즉시 거부된다

사용 예시)

const onClickPromiseAll = async () => {
    
    // 동시에 실행하고 끝날 때까지 한번만 기다림
    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); // 배열로 반환
  };

"https://dog1.jpg","https://dog2.jpg","https://dog3.jpg"가 순차적으로 리턴되고 최종적으로 콘솔에 배열 형태인 ["https://dog1.jpg","https://dog2.jpg","https://dog3.jpg"]가 출력된다.

map을 써서 여러 promise 객체를 간단하게 나타낼 수 있다

const onClickPromiseAll = async () => {
    const result = await Promise.all(
      ["https://dog1.jpg", "https://dog2.jpg", "https://dog3.jpg"].map(
        (el) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve(el);
            }, 3000);
          })
      )
    );
  };