# Javascript Promise(프로미스는)

# Javascript Promise(프로미스는)

by jihoon kim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/async/2.6.1/async.min.js"></script>
<h1>Javascript Promise(프로미스는)</h1>
<pre>
참고 : <a href="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" target="_new">
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
</a>

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

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

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

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

# 프로미스는 라이브러리 형식으로 존재함.
  - 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) {
     ...

JavaScript

var userInfo = {
      id: '[email protected]',
      pw: '****'
    };

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

    function getData(data) {
      return new Promise(function (resolve, reject) {
/* case - 성공*/
          data.parsing = false; // add parsing false
          console.log("getData:::", data);  // logging parseValue
          resolve(data);

/* case - 실패
          reject(new Error("Data 없음"));
          throw new Error("Data 없음");
*/
      }).catch(function (err) {
         console.log('getData then error : ', err);
      });
    }

    function parseValue(data) {
      return new Promise(function (resolve, reject) {
        if( data != null ) {
           data.parsing = true; // change parsing true
           resolve(data);
        }
      })
      .then(function(result) {
        result.auth = false; // add auth false
        console.log("parseValue", result);  // logging parseValue
        return result;
      }).catch(function (err) {
        console.log('parseValue then error : ', err); // then error :  Error: Error in then()
      });
    }

    function auth(data) {
      return new Promise(function (resolve, reject) {
        if ( data != null ) {
            data.auth = true; // change auth true
            data.display = false; // add display false
            console.log("auth::::::", data); // logging auth
            resolve(data);
        } else {
            reject(null);
        }
      });
    }

    function display(data) {
      return new Promise(function (resolve, reject) {
        data.display = true;  // change display true
        console.log("display:::", data); // logging auth
        resolve(data);
      });
    }