[JavaScript] 프로미스 (Promise)

Promise란?
프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다.

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용하며 일반적으로 웹 어플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 주로 사용합니다.

function getData(callback){
	retrurn new Promise(function(resolve, reject)){
    	$.get('test.com/products/1',function(response)
        	resolve(response);
        )};
      )};
}

getData().then(function(tableData){
	console.log(tableData);
});

콜백 함수로 처리하던 구조에서 Promise와 resolve, then과 같은 프로미스 API를 사용하여 구조를 바꿔봤다.

프로미스는 3가지 상태로 나뉜다

Pendin(대기) : 비동기 처리 로직이 아직 완료가 되지 않은 상태

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

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

위 코드와 같이 then을 사용하여 resolve의 값을 사용할 수 있게 된다.

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

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

getData().then().catch(function(err) {
  console.log(err); 
});

위 코드와 같이 then 뒤에 catch를 사용하여 reject값을 사용할 수 있게 된다.         

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('test.com/products/1', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("Request is failed"));
    });
  });
}

getData().then(function(data) {
  console.log(data); 
}).catch(function(err) {
  console.error(err); 
});

위 코드와 같이 종합적으로 응용이 가능하며

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(1);
  }, 2000);
})
.then(function(result) {
  console.log(result); // 1
  return result + 10;
})
.then(function(result) {
  console.log(result); // 11
  return result + 20;
})
.then(function(result) {
  console.log(result); // 31
});

 

여러개의 프로미스를 사용할 수도 있다.

프로미스는 가급적이면 catch를 통해 에러처리하는 것이 효율적이기 떄문에 권장되는 방법이다.