TS로 살펴보는 Promise + Promise.all 병렬처리

https://darrengwon.tistory.com/279

Promise 일반에 대한 내용은 위 포스트에서 이미 다뤘습니다. 여기서는 조금 더 자세하게 Promise를 다룰 것이며, TS를 사용할 예정입니다. 

 

• 일반적으로 Promise를 타이핑할 때는 Promise<T>의 형태로 값을 넘겨주면 됩니다. Dart에서 봤던 Future<T>와 같습니다. 프로미스가 반환하는 결과의 타입을 T에 적어주시면 되겠습니다.

import { readFile } from "fs";

const readFilePromise = (filename: string): Promise<string> =>
  new Promise<string>((resolve, reject) => {
    readFile(filename, (err, buffer) => {
      if (err) reject(err);
      else resolve(buffer.toString());
    });
  });

readFilePromise("./tsconfig.json")
  .then((res) => console.log(res))
  .catch((err) => console.log(err))
  .finally(() => console.log("종료"));

 

 

• Promise는 resolve, reject라는 스태틱 메서드를 제공하고, 각각 then, catch에서 찾아 쓸 수 있습니다.

Promise.resolve(1).then((res) => console.log(res));
Promise.reject(2).catch((err) => console.log(err));

 

• then 체인

then에서 반환한 값은 다음 then에서 사용할 수 있다는 게 포인트

Promise.resolve(1)
  .then((res) => {
    console.log("first res:", res); // 1
    return [1, 3, 5];
  })
  .then((res) => {
    console.log("second res:", res); // [1, 3, 5]
    return { name: "darren", job: "businessman" };
  })
  .then((res) => {
    console.log("third res:", res); // { name: "darren", job: "businessman" }
    return;
  });

 

 

• Promise는 all이라는 스태틱 메서드를 제공한다. Promise 객체들을 배열 형태로 받아 resolve된 값들의 배열로 만들어 준다. 만약 하나라도 reject가 발생한다면 바로 다른 Promise의 resolve 여부와 상관없이 바로 반환합니다.

// Promise.all을 받는 함수 하나를 만듭니다.
const getAllPromise = <T>(promises: Promise<T>[]) => Promise.all(promises);

// 배열로 Proimse를 넣어서 돌리면 결과값을 배열로 반환합니다.
const output = getAllPromise([
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.resolve(3),
  Promise.resolve(4),
]).then((res) => console.log(res)); // [ 1, 2, 3, 4 ]


// 하나라도 reject되면 실패합니다.
const output = getAllPromise([
  Promise.resolve(1),
  Promise.reject(new Error("error입니다")),
  Promise.reject(new Error("error 두번째")),
])
  .then((res) => console.log(res))
  .catch((err) => console.log(err));

 

 

Promise.all은 이렇게 단순한 사용보다 여러 개의 비동기 처리를 병렬적으로 처리하는데 아주 유용하게 쓸 수 있습니다. 매우 빨라집니다! https://code-masterjung.tistory.com/91

 

예시를 들자면 다음과 같이 axios를 병렬적으로 보낸 후 결과값을 배열로 받아 적절히 처리하는 방법이 있을 수 있습니다.

import axios from "axios";

const getAllPromise = <T>(promises: Promise<T>[]) => Promise.all(promises);

const getDataOne = axios.get("https://jsonplaceholder.typicode.com/todos/1");
const getDataTwo = axios.get("https://jsonplaceholder.typicode.com/todos/2");

const output = getAllPromise([getDataOne, getDataTwo])
  .then((res) => {
    res.map((el) => console.log(el.data));
  })
  .catch((err) => console.log(err));

 

병렬처리를 이미지화하면 다음과 같이 표시할 수 있겠습니다.

 

 

• Promise.all 보다 사용 빈도가 떨어지지만 race라는 스태틱 메서드도 있습니다. 하나라도 resolve되면 해당 값을 담은 내용을 반환합니다. 그러나 거절값이 가장 먼저 발생하면 reject됩니다.

const ouput = Promise.race([
  Promise.resolve("done!"),
  Promise.reject(new Error("nope")),
])
  .then((res) => console.log(res)) // done!
  .catch((err) => console.log(err));