(JS) 프로미스(Promise)

등장배경

비동기 처리를 위한 콜백 패턴은 콜백 헬이나 에러 처리가 곤란하다는 문제점이 있다고 한다.

이를 극복하기 위해 ES6에서 프로미스(Promise)가 도입되었다.

 

 

일단 글로써 익히기

• Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스(Promise 객체)를 생성한다.
• Promise는 호스트 객체가 아닌 ECMAScript 사양에 정의된 표준 빌트인 객체이다.

 

Promise 생성자 함수(new Promise)는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데,

• 이 콜백 함수(executor 함수라고도 한다.)는 resolve와 reject를 인수로 전달받는다.
• executor의 인수 resolve와 reject는 자바스크립트에서 자체 제공하는 콜백이다.
• 따라서 개발자는 resolve와 reject를 신경쓰지 않고 executor 안 코드만 작성하면 된다.

 // Promise 생성자 함수의 콜백함수는 function(resolve, reject).
 // 이 함수를 executor라 하며, 인수로 resolve, reject를 받음.
 // 프로미스가 만들어지면 executor 함수는 자동으로 실행.

const DC2 = new Promise(function(resolve, reject) {
    setTimeout(() => {
        resolve(console.log('나는 비동기 콜백 함수다!'))
    }, 2000);
})

 

별도로 호출안해도 executor 함수가 실행되었다.

executor 함수는 new Promise가 만들어질 때 자동으로 실행된다.

 

 

---

 

 

executor는 자동으로 실행되는데 이 실행 여부에 따라 resolve던 reject던 하나는 꼭 호출이 되어야 한다.

 

• resolve(value) : 일이 성공적으로 끝난 경우, 그 결과를 나타내는 value와 함께 호출
• reject(error) : 에러 발생시 에러 객체를 나타내는 error와 함께 호출

reject는 resolve와 같이 작성할 수는 있으나

Error 객체와 함께 작성되는 것이 권장된다.

 

 

한편, new Promise가 생성하는 프로미스 객체는 함수가 진행됨에 따라 아래와 같은 프로퍼티를 갖게 된다.

1. 초기 상태는 보류(pending)에 결과값은 할당되지 않았다.(undefined)
2. resolve되면 상태는 fulfilled가 되며, 그 결과값은 resolve의 value가 된다.(호출)
3. reject되면 상태는 rejected가 되며 그 결과값은 에러 객체를 나타내는 error와 함께 호출된다.

 

---

 

 

executor는 resolve나 reject 둘 중 하나를 반드시 호출한다.

• 여기에 더하여, resolve나 reject 인수 하나만 받고 그 이외의 인수는 무시한다.
• 변경된 상태는 더 이상 변하지 않는다.

reject는 resolve와 같이 작성할 수는 있으나

Error 객체와 함께 작성되는 것이 권장된다.

// reject가 더 빨리 실행되는 경우

const DC2 = new Promise(function(resolve, reject) {
    setTimeout(() => {
        resolve(console.log('나는 비동기 resolve다!'))
    }, 2000);
    setTimeout(() => {
        reject(new Error('나는 비동기 Error다!'))
    }, 1500);
})

reject가 더 빨리 executor 함수에 인수로 전달되었다. 따라서 Error가 났다.

 

---

// resolve가 더 빨리 실행되는 경우

const DC2 = new Promise(function(resolve, reject) {
    setTimeout(() => {
        resolve(console.log('나는 비동기 resolve다!'))
    }, 1500);
    setTimeout(() => {
        reject(new Error('나는 비동기 Error다!'))
    }, 2000);
})

resolve가 먼저 출력되었다. 이것이 콜백 비동기 함수의 매력인가..?!

 

---