1. Promise란

비동기 처리를 위한 패턴으로 callback과 다르게 처리 시점을 명확하게 보여주는 패턴이다.

2. 콜백의 단점

2.1 콜백 헬

callback-hell

step1(function (value1) {
  step2(value1, function (value2) {
    step3(value2, function (value3) {
      step4(value3, function (value4) {
        step5(value4, function (value5) {
          // value5를 사용하는 처리
        });
      });
    });
  });
});

비동기 처리를 위해 함수 종료후 다시 함수를 쓰다보니 점점 우측으로 밀려서 함수를 작성해야 한다.

이는 가독성을 나쁘게하고 처리 순서를 파악하기 어렵게 만든다.

2.2 에러 처리의 한계

error-catch

try {
  setTimeout(() => {
    throw new Error("Error!");
  }, 1000);
} catch (e) {
  console.log("에러를 캐치하지 못한다..");
  console.log(e);
}

setTimeout함수는 비동기 함수이므로 콜백 함수가 실행될 때까지 기다리지 않고 즉시 종료되어 호출 스택에서 제거되므로 catch로 잡을 수 없다.

3. Promise

Promise 객체는 상태를 가진다. 상태의 종류는 다음과 같다.

상태	의미	구현
pending	비동기 처리가 아직 수행되지 않은 상태	resolve 또는 reject 함수가 아직 호출되지 않은 상태
fulfilled	비동기 처리가 수행된 상태 (성공)	resolve 함수가 호출된 상태
rejected	비동기 처리가 수행된 상태 (실패)	reject 함수가 호출된 상태
settled	비동기 처리가 수행된 상태 (성공 또는 실패)	resolve 또는 reject 함수가 호출된 상태

Promise 객체는 인자로 콜백함수 두개를 전달 받는다.

비동기 처리가 성공했을 때 reslove를 호출하고 실패했을 때 reject함수를 호출한다.

promise

const promise = (boolean) => {
  return new Promise((resolve, reject) => {
    boolean ? resolve(1) : reject(2);
  });
};

promise(true)
  .then(
    (item) => console.log(item),
    (item) => console.log(item)
  )
  .catch((item) => console.log(item)); // 1

promise 성공시(resolve 호출시) then의 첫 번째 함수를, 실패시(reject 호출시) then의 두 번째 함수를 호출한다.

두 번째 함수를 전달하지 않고 catch를 통해서도 오류처리가 가능하다.

4. Promise.all

Promise

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(console.log) // [ 1, 2, 3 ]
  .catch(console.log);

Promise.all은 내부의 Promise가 전부 처리된 후에 then을 실행한다.

이때, 처음 만든 프로미스객체가 나중에 종료된다 하더라도 가장 첫번째 인수로 전달한다.

즉, 순서를 보장한다

단, 실패시(reject 호출시) 가장 먼저 실패한 인수 하나만을 반환한다.

4. Promise.race

Promise.all과 유사하나 순서를 보장하지 않고 가장 먼저 끝난 프로미스부터 차례로 resolve를 호출해 인수를 전달한다

참고자료: poiemaweb.com

If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

Promise

1. Promise란

2. 콜백의 단점

2.1 콜백 헬

2.2 에러 처리의 한계

3. Promise

4. Promise.all

4. Promise.race

FEATURED TAGS

FRIENDS