Javascript Promise(프로미스)

Javascript Promise(프로미스는)

참고 : 
https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#promise%EA%B0%80-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%9C%EA%B0%80%EC%9A%94


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

# 프로미스는..
  - 프로미스는 한 번만 성공 또는 실패할 수 있습니다.
    두 번 성공 또는 실패할 수 없으며, 성공을 실패로 전환하거나 실패를 성공으로 전환할 수도 없습니다.

  - 프로미스가 성공 또는 실패한 후에 성공/실패 콜백을 추가할 수 있습니다.
    이벤트가 더 일찍 발생한 경우에도 올바른 콜백이 호출됩니다.

  - 비동기 성공/실패에 매우 유용합니다

# 프로미스는 라이브러리 형식으로 존재함.
  - Q
  - when
  - WinJS
  - RSVP.js
 ※ Javascript 프로미스는 RSVP.js와 유사함.

# 기존 처리방식 (CallBack)?
  function getData(callbackFunc) {
    $.get('url 주소/products/1', function (response) {
      callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
    });
  }

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


# 프로미스 처리방식.
  - resolve 및 reject 등 두 매개변수를 가진 콜백인 단일 인수임.
  function getData(callback) {
    // new Promise() 추가
    return new Promise(function (resolve, reject) {
      $.get('url 주소/products/1', function (response) {
        // 데이터를 받으면 resolve() 호출
        resolve(response);
      });
    });6
  }

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


# 프로미스의 3가지 상태(states)
  상태란 프로미스의 처리 과정을 의미.
  new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖습니다.

  - Pending(대기)  : 비동기 처리 로직이 아직 완료되지 않은 상태
  - Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
  - Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

  - Pending(대기)
    new Promise(function (resolve, reject) {
      // ...
    });

  - Fulfilled(이행)
    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(실패)
    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
    });

# Promise Chaining
    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
    });