js) Promise

• 프로미스는 자바스크립트 비동기 처리에 사용되는 객체
  - (비동기 처리란 '특정 코드의 실행이 완료될 때 까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미)
• api통신이 완료된 후 다음 함수로 넘어 갈 수 있게 해준다?

프로미스 코드의 기초

• 콜백함수를 사용한 코드

//ajax 통신 api를 이용하여 지정된 url의 1번상품 데이터를 받아오는 코드
function getData(callbackFunc){
  $.get('url/products/1', function(response) {
    callbackFunc(response); // 서버에서 받은 response값을 callback 함수에 넘겨줌
  });
}

• 프로미스를 적용한 코드

function getData(callback){
  // 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() 의 response 값이 tableData에 전달됨
});

프로미스의 3가지 상태

• 프로미스는 new Promise()로 생성되고 종료될 때까지 3가지 상태를 갖는다.

pending (대기)

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

new Promise();
// new Promise() 메서드 호출시 콜백함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.
new Promise(function(resolve, reject){
})

Fulfilled (이행)

• 콜백함수의 인자 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
})

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);
})

프로미스 코드 예제 (1)

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 출력
});

• 제대로 응답을 받아오면 resolve() 메서드 호출 -> then()
• 응답이 없으면 reject() 메서드 호출 -> catch()

프로미스 코드 예제 (2)

• setTimeout() API

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(1); // 여기서 1 값을 가지고 then으로
  }, 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
});

---

출처 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/