Promise 동작원리와 예시

Promise

- 프로미스는 ES6에서 도입된 비동기 처리를 위한 패턴이다. 기존의 콜백 패턴의 콜백 헬로 인한 가독성 문제 및 에러 처리를 해결하기 위해 도입되었다.

- Promise 생성자 함수를 통해 인스턴스화 하며, 생성자 함수는 비동기 작업을 수행할 콜백 함수를 인자로 전달받는데, 이 콜백함수는 resolve와 reject 함수를 인자로 전달받는다.

- Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행하고, 비동기 처리가 성공하면 콜백 함수의 인수로 전달받은 resolve 함수를 호출하고, 비동기 처리가 실패하면 reject 함수를 호출한다

- 프로미스는 현재 비동기 처리가 어떻게 진행되고 있는지를 나타내는 상태 정보를 갖는다.(pending : 비동기 처리가 아직 수행되지 않은 상태, fulfilled : 비동기 처리 성공, rejected : 비동기 처리 실패)

- 비동기 처리가 성공하면 resolve 메서드의 인자로 비동기 처리 결과를 전달하여 resolve 메소드를 호출하고, 비동기 처리가 실패하면 reject 메서드의 인자로 에러 메시지를 전달하여 reject 메서드를 호출한다.

- Promise로 구현된 비동기 함수는 Promise 객체를 반환하는데, 반환된 Promise 객체의 후속 처리 메서드(then, catch, finally)를 통해 비동기 처리 결과 또는 에러 메시지를 전달받아 처리한다.

- then 메서드는 두 개의 콜백함수(첫 번째는 비동기 처리가 성공되어 값을 반환한 경우, 두 번째는 비동기 처리가 실패하여 에러값을 반환한 경우)를 인자로 받는다. 

- catch 메서드는 한 개의 콜백함수를 인자로 받고 비동기 처리가 실패한 경우에 호출된다.

- finally 메서드는 한 개의 콜백함수를 인자로 받고 비동기 처리의 성공과 실패 여부와 상관없이 무조건 한번 호출된다.

- then, catch, finally 메서드 모두 언제나 프로미스를 반환한다.

const promise = (type) => {
  return new Promise((resolve, reject) => {
    if (type === 'success') {
      setTimeout(() => {
        resolve('성공');
      }, 2000);
    } else {
      setTimeout(() => {
        reject('실패');
      }, 2000);
    }
  });
};

promise('success').then(console.log).catch(console.log);
promise('success')
  .then(console.log)
  .catch(console.log)
  .finally(() => console.log('무조건'));
promise('fail').then(console.log).catch(console.log);
promise('fail').then(console.log).catch(console.log);

// 문제
// "실패"는 과연 몇 번 출력될까요
promise('fail').then(console.log.console.log).catch(console.log);

---

* 정리

- 프로미스는 기존의 콜백 패턴에서의 한계(가독성 문제 및 에러처리)를 해결하기 위해 ES6에서 도입된 JavaScript의 비동기 처리를 위한 패턴입니다. 프로미스는 생성자 함수를 통해 인스턴스화 하며 생성자 함수는 비동기 작업을 수행할 콜백 함수를 인자로 받고 이 콜백함수는 resolve(비동기 처리가 성공시 호출할 함수), reject(비동기 처리가 실패시 호출할 함수)를 인자로 받습니다. 프로미스는 현재 비동기 처리가 어떻게 진행되고 있는지에 대한 상태정보(pending, fulfilled, rejected)를 갖습니다. Promise로 구현된 비동기 함수는 Promise 객체를 반환하는데, Promise의 객체의 후속 메서드(then, catch, fianlly)를 통해 비동기 처리 결과 또는 에러 메시지를 전달받아 처리합니다. then 메서드는 두 개의 콜백함수(첫 번째는 비동기 처리가 성공한 경우, 두번째는 비동기 처리가 실패한 경우)를 인자로 받고, catch(비동기 처리가 실패한 경우)와 fianlly(비동기 처리의 성공과 실패 여부와 상관없이 무조건 실행된다)는 한 개의 콜백함수를 인자로 받습니다.