자바스크립트 Promise 객체란?

출처:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

ES6 이전에는 비동기적인 작업을 처리할 때 콜백함수로 처리를 했어야 했는데,

이럴 경우 비동기작업이 많아질 경우에는 코드가 난잡해지는 단점이 있었다.

Promise는 라이브러리로 존재했는데, 이제는 JS 기본 스펙이 되었다.

 

0. Promise는 비동기적 처리의 성공/실패 여부와 그 결과값을 대표하는 object이다.

 

1. Promise는 '약속'이라는 사전적 정의에 걸맞게 동작한다.

  - 약속이란 어떤 일에 대한 보장이다.

  - 약속은 지킬수도, 지켜지지 않을 수도 있다.

  - 약속이 지켜질 경우, 그에 대한 결과물이 따른다.

  - 약속이 지켜지지 않을 경우, 그에 대한 이유와 해결책이 따른다.

  - 약속을 한다고 해서 '지금 당장 그 약속의 내용을 실행한다'는 건 아니다.

  - 약속을 한 상대방으로부터 답변을 받지 못할 수도 있으므로, 그런 경우를 대비하여 '10초동안 답변이 없을 경우 약속이 결렬된 것으로 간주한다' 등의 조건을 설정할 수 있다.

 

 

2. Creation of Promises

promise는 new 키워드를 이용하여 생성, 사용한다.

var promise = new Promise(function(resolutionFunc, rejectionFunc){
	// resolutionFunc는 비동기작업의 처리과정에서 성공했을 경우
    // rejectFunc는 실패했을 경우에 대한 내용이다
    // 이제 이 자리에 각각의 경우에 어떻게 할것인지.. 코딩하면 된다
});

 

3. Promise의 상태

3-1. pending: initial state. fulfilled도, rejected도 아닌 상태.

3-2. fulfilled: 비동기적 작업이 성공적으로 완료된 상태. fulfilled with a value.

3-2. rejected: 비동기적 작업이 실패한 상태. rejected with an error.

 

Promise 객체의 상태가 fulfilled이냐 rejected이냐에 따라 promise.then() 메소드가 호출되고, 그에따라 적절한 handler가 대기상태에 들어온다. (Promise 객체의 상태가 정해지는 시기와 handler가 붙는 시기와 관련하여 race라는 개념이 나온다)

 

4. Promise.prototype.then(), Promise.prototype.catch()는 뭐하는 놈들인가?

Promise 객체의 상태가 fulfilled 또는 rejected로 정해졌을 때, 그 객체에 대한 후속작업을 할 때 쓰이는 메소드이다.

밑에 그림을 보면 Promisd fulfilled 되었을 때 .then()을 쓰고,

rejected 되었을 때 .then()과 .catch()를 쓰는 것을 볼 수 있다.

 

 

then()은 Promise 객체 또는 fulfillment value에 fulfillment handler, rejection handler를 붙이는 역할을 하고, 반환값은 새로운 Promise 객체이다.

catch()는 Promise 객체 또는 original settled value에 fulfillment handler, rejection handler를 붙이고, 반환값은 Promise 객체이다.

 

5. Promise.resolve()는 뭔데요..?

Promise.resolve(value)는 인자값으로 주어진 value를 값으로 가지는 새로운 Promise 객체를 생성한다. 만약에 그 value가 thenable(예: then 메소드를 가지고 있다)이라면, 만들어진 Promise 객체는 그 then을 따른다. thenable이 아니라면, 그냥 value를 값으로 가지는 promise를 반환한다.