Promise, Promis.all 만들기

await는 Promise를 반환해주는 얘 앞에만 사용 가능하다.

그래서 응답을 기다릴 필요가 있는 경우에는 Promise로 만들어주면 await을 쓸 수 있다.

 

아래는 new Promise 를 사용해서 axios 느낌의 Promise를 만든 예시다.

const fetchData = async () => {
  // API 보내기 요청!!

  // 이건 axios임
  const result = await new Promise((성공시함수, 실패시함수) => {
    setTimeout(() => {
      try {
        console.log("이미지 받아 왔다~"); // 5초 뒤에 이미지 받아옴
        성공시함수("강아지.jpg");
      } catch (error) {
        실패시함수("실패했습니다!!!");
      }
    }, 5000);
  });

  console.log(result);
  console.log("받아온 강아지.jpg 브라우저 전달!");
};

fetchData();

 

 

- Promise.all

const fetchData = async () => {
  console.time("=== 개별 Promise 각각 ===");
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("성공!!");
    }, 2000);
  });

  await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("성공!!");
    }, 3000);
  });

  await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("성공!!");
    }, 1000);
  });
  console.timeEnd("=== 개별 Promise 각각 ===");
};

fetchData();

const fetchData2 = async () => {
  console.time("=== 한방 Promise.all ===");

  const results = await Promise.all([
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("성공!!");
      }, 2000);
    }),

    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("성공!!");
      }, 3000);
    }),

    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("성공!!");
      }, 1000);
    }),
  ]);
  console.log(results);
  console.timeEnd("=== 한방 Promise.all ===");
};

fetchData2();