promise

Promise 객체는 비동기 작업이 맞이할 미래의 완료 / 실패와 그 결과값을 나타낸다.

 

프로미스를 사용하면 비동기 메서드에서 동기 메서드처럼 값을 반환할 수 있다. 다만, 최종 결과는 반환하지는 않고 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공한다.

 

Promise의 3가지 상태

• pending (대기) : 이행/거부되지 않은 초기 상태
• fulfilled (이행) : 연산이 성공적으로 완료된 상태
• rejected (거부) : 연산이 실패한 상태

 

promise는 대기 중이지 않으며 이행 또는 거부되었을 때 처리(settled)되었다고 말한다. resolved는 promise가 다른 promise의 상태에 맞춰 처리되었거나 상태가 '잠김'으로 되었다는 의미이다. 

 

 

생성자

promise( )

 

 

속성

Promise.length : 값이 언제나 1임 ( 생성자 인수의 수 )

Promise.prototype : 생성자의 프로토타입을 나타냄

 

 

메서드

Promise.all( )

Syntax

Promise.all(iterable);

 

모든 promise가 fulfilled 되면 결과를 배열로 반환하고 하나라도 reject된 경우 그 이유를 반환한다.

iterable 내의 모든 promise가 이행한 뒤 어떤 promise가 거부하면 즉시 거부하는 promise를 반환한다.

반환한 promise가 이행하는 경우 iterable 내의 promise가 결저한 값을 모은 배열이 이행 값이 된다.

반환한 promise가 거부하는 경우 iterable 내의 거부한 promise의 이유는 그대로 사용해 자신도 거부한다.

 

여러 promise 결과를 집계할 때 유용하다.

즉, Promise.all() 은 배열 내 모든 값의 이행 (또는 첫 번째 거부) 를 기다린다.

 

Usage

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});


Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});

// output
[3, 42, 'foo']

 

Promise.allSettled( )

Syntax

Promise.allSettled(iterable);

 

배열이나 별도의 나열 가능한 객체를 통해 나열된 Promise 모음이 모두 이행하거나 거부했을 때에 대응할 수 있는 promise를 반환한다.

 

Usage

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => 
  setTimeout(reject, 100, 'foo')
);
const promises = [promise1, promise2];

Promise.allSettled(promises).then((results) =>	// return 문 뿐이어서 중괄호도 생략 가능.
  results.forEach((result) => console.log(result.status))
);

//output
"fulfilled"
"rejected"

 

Return Value

 

실행할 Promise객체로 비동기 방식으로 resolved / rejected된 결과의 모음을 담아서 인자로 전달한다. 이때 반환된 Promise의 핸들러는 각 본래 Promise 객체가 담긴 배열을 전달한다.

 

각각의 출력된 Promise는 status 속서을 통해

fulfilled이 전달되면 value 속성이 전달되고, rejected가 전달되면 reason 속성을 전달한다. 각 Promise가 어떻게 이행 또는 거부되었는지 value / reason 속성을 통해 알 수 있다.

 

Promise.race( )

Syntax

Promise.race(iterable);

 

fulfilled, rejected 여부에 관계없이 처음으로 종료된 promise 를 반환한다.

 

Usage

const promise1 = new Promise((resolve, reject) => { // 리턴값뿐일 때 return 키워드와 함께 중괄호 생략 가능
  setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // promise1, promise2 의 결과에 상관없이 delay가 더 짧았던 promise2를 반환한다.

 

Promise.reject( )

주어진 이유로 거부하는 Promise 객체를 반환한다.

 

---

Promise.resolve( )

주어진 값으로 이행하는 Promise 객체를 반환한다. 

---

Promise 프로토타입

속성

Promise.prototype.constructor

인스턴스의 prototype을 만드는 함수를 반환한다. 기본값을 Promise 함수이다.

 

 

메서드

Promise.prototype.catch( )

Syntax

promise.catch(onRejected);	// onRejected : Promise가 reject되었을 때 호출되는 함수

promise.catch(function(reason) {	// onRejected 함수는 reason이라는 단 하나의 인자를 받는다.
  // rejection
})

 

Promise를 리턴하는데 오로지 reject된 경우만을 다룬다.

 

Usgae

const promise1 = new Promise((resolve, rejected) => {
  throw 'Uh-oh!';
});

promise1.catch((error) => {
  console.log(error);
});

// output
Uh-oh!

 

 

Promise.prototype.then( )

Syntax

promise.then(onFulfilled, onRejected);	// 이행값(fulfillment value, rejection reason)을 인수로 받음

promise.then(function(value) {
// 이행
}, function(reason) {
// 거부
})

 

then() 메서드는 promise를 리턴하고 두 개의 callback 함수를 인수로 받는다. 하나는 promise가 이행했을 때, 다른 하나는 거부했을 때를 위한 콜백이다.

 

usage

const promise1 = new Promise((resolve, reject) => {
  resolve("Success!");
});

promise1.then(value) => {
  console.log(value);
});

//output 
"Success!"
  

 

*then과 catch 메서드는 promise를 반환하기 때문에 체이닝이 가능한데 이를 합성이라고 한다.

쉽게 말해서 then 메서드는 promise를 리턴하기 때문에 이어지는 then 호출들을 쉽게 연결할 수 있다.

 

 

Promise.prototype.finally( )

Syntax

promise.finally(onFinally);

promise.finally( function() {
 // settled (fulfilled or rejected)
 });
 

 

Promise가 처리되면 성공적으로 수행되었는지 거절되었는지에 관계없이 지정된 콜백 함수를 호출하고 Promise 를 리턴한다.

finally() 는 then() 과 catch() 핸들러에서의 코드 중복을 피하게 해 준다.