[JavaScript] Promise

Promise란? 

Promise는 자바스크립트 비동기 처리에 사용되는 객체입니다.

비동기 처리란 예를 들어 서버에 데이터를 요청했는데 해당 데이터가 오기도 전에 화면에 데이터를 표시하는것 입니다.

이런 문제점을 해결하기 위한 방법 중 하나가 Promise입니다.

 

 

Promise 코드

아래는 ajax 코드입니다.

function getData(callbackFunc) {
  $.get('url 주소/products/1', function(response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
  });
}

getData(function(tableData) {
  console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

ajax 통신을 이용하여 지정된 URL 데이터를 받아오는 코드입니다. 비동기 처리를 위해 콜백 함수를 사용했습니다.

 

 

위 코드를 Promise를 적용하면 아래와 같습니다.

function getData() {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

 

 

Promise의 3가지 상태값

(1) Pending (대기)

먼저 new Promise() 메서드를 호출하면 대기(Pending)상태가 됩니다.

new Promise(); //Promise 생성

 

new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject입니다.

new Promise(function(resolve, reject) {
  // ...
});

 

(2) Fulfilled (이행 or 완료)

콜백 함수의 인자 resolve를 아래와 같이 실행하면 이행(Fulfilled) 상태가 됩니다.

new Promise(function(resolve, reject) {
  resolve();
});

 

이행 상태가 되면 then() 을 이용하여 처리 결과 값을 받을 수 있습니다.

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

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

 

(3) Rejected (실패)

콜백 함수의 인자 reject를 아래와 같이 호출하면 실패(Rejected) 상태가 됩니다.

new Promise(function(resolve, reject) {
  reject();
});

 

그리고, 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있습니다.

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

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

 

 

프로미스 처리 흐름 - 출처 : MDN

 

 

Promise 코드 예제 (ajax)

ajax 통신 예제 코드에 Promise를 적용하였습니다.

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

// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData().then(function(data) {
  console.log(data); // response 값 출력
}).catch(function(err) {
  console.error(err); // Error 출력
});