1. 프로미스?

비동기 처리를 위해 콜백 함수를 사용한다.
하지만 콜백 패턴은 가독성이 나쁘고 비동기 처리 중 발생한 에러의 예외 처리가 곤란하며 여러 개의 비동기 처리 로직을 한꺼번에 처리하는 것도 한계가 있다.

이를 보완하기위해 ES6에서 프로미스를 도입. 비동기 처리 시점을 명확하게 표현한다.
후속 처리 메소드를 체이닝(chainning)하여 여러 개의 프로미스를 연결하여 사용할 수 있다.

2. 콜백 패턴의 단점

2.1 콜백 헬 (Callback Hell)

콜벡 헬이 발생하는 이유
비동기 처리 모델은 실행 완료를 기다리지 않고 즉시 다음 태스크를 실행한다.
따라서 비동기 함수 내에서 처리 결과를 반환하면 기대한 대로 동작하지 않는다.

비동기식 처리 모델(병렬적 태스크 수행)

• 태스크가 종료되지 않은 상태여도 대기하지 않고 즉시 다음 태스크 실행(Non-Blocking)

• DOM 이벤트, Timer 함수, Ajax 요청

• 비동기 처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 네스팅(nesting)되어 복잡도가 높아지는 콜백 헬이 발생된다. (가독성 안좋음)

2.2 에러 처리의 한계

3. 프로미스의 생성

Promise 생성자 함수를 통해 인스턴스화한다.

1
2
3
4
5
6
7

const promise = new Promise((resolve, reject) => {
  if (//비동기 작업 수행 성공) { 
    resolve('result');   // fulfilled 상태
  } else { // 비동기 작업 수행 실패
    reject('failure reason');  // rejected 상태
  }
});

4. 프로미스의 후속 처리 메소드

• Promise로 구현된 비동기 함수는 Promise 객체를 반환하여야 한다.
• Promise 객체의 후속 처리 메소드(then, catch)를 통해 비동기 처리 결과 또는 에러 메시지를 전달받아 처리한다.
• Promise 객체는 상태를 갖는다. 이 상태에 따라 후속 처리 메소드를 체이닝 방식으로 호출한다.

then

• 두 개의 콜백 함수를 인자로 전달 받는다.
• 첫번째 콜백함수 - 성공시 호출 (fulfilled, resolve 함수가 호출된 상태)
• 두번째 콜백 함수 - 실패시 호출 (rejected, reject 함수가 호출된 상태)
• then 메소드는 Promise를 반환한다.

catch

• 예외가 발생하면 호출 (비동기 처리에서 발생한 에러, then 메소드에서 발생한 에러)
• Promise를 반환한다.

5. 프로미스의 에러 처리

6. 프로미스 체이닝

7. 프로미스의 정적 메소드

7.1 Promise.resolve / Promise.reject

존재하는 값을 Promise로 래핑하기 위해 사용

7.2 Promise.all

각각의 프로미스가 resolve한 처리 결과를 배열에 담아 resolve 하는새로운 프로미스 반환
처리순서가 보장

7.3 Promise.race

가장 먼저 처리된 프로미스가 resolve한 처리 결과를 resolve하는 새로운 프로미스를 반환
병렬처리 x