Promise

프로미스(Promise)란?

 

자바스크립트 비동기 처리에 사용되는 객체이다. 비동기 처리는 특정 코드의 실행이 완료될 때 까지 기다리지 않고, 다음 코드를 먼저 수행하는 자바스크립트의 특성을 뜻한다.

프로미스 3가지 상태

프로미스(Promise)를 사용할 때 반드시 알아야 하는 개념이 프로미스의 상태(states)이다. 이 상태는 프로미스의 처리 과정을 의미하는데, new Promise()로 프로미스를 생성하고, 종료될 때까지 3가지 상태를 갖는다. 

 

Pending(대기) : 비동기 로직이 아직 완료되지 않은 상태

 new Promise() 메소드를 호출하면 대기 상태가 된다.

 new Pormise() 메소드를 호출하게 되면 콜백함수를 선언할 수 있고, 콜백함수는 reslove, reject 두 가지가 있다.

 

new Promise()

//new Promise() 메서드는 두가지 콜백함수를 선언할 수 있다.
new Promise(function(resolve, reject){
   //...statement
});

 

Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

 .resolve()를 사용하면 이행 상태가된다.

 .then()을 이용하여 처리 결과 값을 받을 수 있다. 

 

function getData() {
 new Promise(function(resolve, reject){
   let data = 'RGB'
   resolve(data)
 });
}

//오직 대기 상태에서만 .then()메소드를 사용할 수 있다.
getData().then(function(resolvedData) {
    console.log(resolvedData);
})

 

Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

.reject()를 사용하면 실패 상태가 된다.

.실패한 결과 값을 받기위해 .catch()를 사용하길 적극 권장된다.

 

function getData() {
 new Promise(function(resolve, reject){
  reject(new Error("에러"));
 });
}

//reject로 실패 상태를 전달 받고 실패 이유를 catch()로 받아 log에 띄운다.
getData().then().catch(function(err) {
    console.log(err);
})

 

프로미스 체이닝(Promise Chaining, 여러개의 프로미스 연결)

프로미스의 특징중 하나는 여러개의 프로미스를 연결하여 사용할 수 있다는 점이다. then() 메소드를 호출하고 나면 새로운 프로미스 객체가 반환된다. 

function getData() {
  return new Promise({
    //...statement
  });
}

getData()
 .then(function(data) {
  //...statement
 })
 .then(function(...) {
  //...statement
 })
 .then(function() {
  //...statement
 });

 

 아래 코드에서 hwInfo는 사용자 컴퓨터의 하드웨어 정보를 담은 객체를 의미하고,  benchMark, check, display는 각각 프로미스를 반환해주는 함수로 가정을 했다. 아래처럼 여러개의 프로미스를 .then()으로 연결하여 처리할 수 있다.

 

getData(hwInfo)
 .then(benchMark)
 .then(check)
 .then(display);
 
let hwInfo = { 
  CPU: 'R7-3700X',
  RAM: 'DDR4 16GB * 2',
  VGA: 'RX-6800'
}

function benchMark() {
  return new Promise({
  	//...statement
  });
}

function check() {
  return new Promise({
  	//...statement
  });
}

function display() {
  return new Promise({
  	//...statement
  });
}

 

프로미스 에러 처리방법

 

작성한 코드가 항상 제대로 작동할 수는 없을 것이다. 각종 문제로 인한 오류가 발생 했을때, 프로미스의 에러 처리방법이 존재하고, 방법은 2가지가 존재한다. 하나는 .then()두번째 인자로 주는 방식과 자주쓰이길 권장되면서 대표적인 catch()에 대해 알아 보려한다.

 

then()의 두 번째 인자로 에러를 처리하는 방법

otherPromise().then( () => {
 //..statement
}, function(err) {
   console.log(err)
})

 

catch()를 이용하여 에러를 처리하는 방법

 

otherPromise().then( () => {
 //..statement
})
.catch( (err) => {
    console.log(err)
})

그런데 왜 catch()가 권장이 되는걸까?

 

benchMark() 함수의 프로미스에서 resolve() 메소드를 호출해서 결과는 정상적으로 출력되었다. 하지만 첫번째 then() 의 콜백함수 내부에서 오류가 나는 경우 오류를 제대로 잡지 못한다.

 

function benchMark() {
  return new Promise((resolve, reject) => {
    resolve('hi');
  });
}

benchMark()
.then((data) => {
  console.log(data)
  throw new Error("몬가 잘못된듯.."); //Uncaught 에러
}, (err) => {
  console.log(err)
});

 

따라서, 아래처럼 Uncaught 에러가 발생한다.

 

 catch()를 사용했을 때, 아래 코드와 같이 정상적으로 에러코드를 출력했다.

 

function benchMark() {
  return new Promise( (resolve, reject) {
    resolve('hi');
  });
}

benchMark()
.then( (data) {
  console.log(data)
  throw new Error("몬가 잘못된듯..");
})
.catch( (err) {
  console.log(err)
});

//hi
//Error: 몬가 잘못된듯..

만약 더 많은 예외 처리 상황을 위한경우 프로미스의 then() 마지막 메소드 뒤로 catch()쓰기를 권장한다.

 

캡틴판교 - joshua1988.github.io/web-development/javascript/promise-for-beginners/