JS - Promise

출처: https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#promise%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94

자바스크립트 Promise 쉽게 이해하기

 

1. Promise가 무엇인가?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다.

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

 

2. Promise 예시

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

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

//2. Promise 적용 후 모습
function getData(callback) {
  // new Promise() 추가: 1) Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response); // 2) Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
    });
  });
}

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

 

3. 여러 개의 프로미스 연결하기 (Promise Chaining)

사용자 로그인 인증 로직 예시

getData(userInfo)
  .then(parseValue)
  .then(auth)
  .then(diaplay);

//사용자 정보
var userInfo = {
  id: 'test@abc.com',
  pw: '****'
};

//로직1
function parseValue() {
  return new Promise({
    // ...
  });
}

//로직2
function auth() {
  return new Promise({
    // ...
  });
}

//로직3
function display() {
  return new Promise({
    // ...
  });
}