(ECMA Script) Promise

<배경지식>

• Javascript의 개발 목적
• 사용자 웹 페이지에서 사용될 목적
  주된 기능은 사용자의 반응하기 (마우스 이벤트(클릭, 이동 등), 키보드 입력(keyup, keydown))
• Javascript는 애초부터 비동기에 반응하기 위한 목적으로 개발되었다.

• 주로 함수표현식이나 콜백으로 비동기를 처리한다.

• 또한, 처리 결과에 따라 다른 방법들을 제공하게 됨에 따라 코드가 복잡해지기 시작한다.

• **자바스크립트에서의 확정되지 않은 상태에 대한 처리 방법

var btn = document.querySelector("#btn");
btn.onclick = function(event) {
  validateName(function() {
    alert("이름을 입력하세요!");
  }, function () {
    alert("성공!");
  });
}
function validateName(error, success) {
  var name = document.querySelector("#name");
  if ( name.value == "" ) {
    error();
  }
  else {
    success();
  }
}

콜백이 늘어나 자칫 콜백지옥이 빠지기 쉽다.
프로미스는 이런 처리에 대한 쉬운 해결책을 제공한다.**

Promise

• 프로미스는 비동기 처리 결과가 확정되지 않은 이벤트에 대한 처리 방법을 제공한다.
• 이것을 위해 프로미스는 “보류(pending)”, “성공(fulfilled)”, “실패(rejected)” 상태를 제공한다.
• 프로미스는 상태에 따른 처리가 주된 목적.

• Promise의 상태 변화
  

프로미스가 제공하는 상태에 따라 개발자는 .then() 혹은 .catch() 메소드를 제공한다.

• 프로미스는 상태에 따른 처리가 주된 목적이지만, 프로미스 내에서 다른 프로미스를 만들어 비동기 처리를 연속으로 처리할 수 있도록 한다.
• .then(), .catch()는 수행될 때마다 다른 프로미스를 만들어 반환한다.

let btn = document.querySelector("#btn");
btn.onclick = function(event) { 
  let promise = validate("#name");
  promise.then(function(element) {
    alert(element.id + " 입력되었습니다.");
  }).catch(function(value) {
    alert(value);
  }).then(function() {
    alert("다음 프로미스!");
  });
}
function validate(selector) {
  return new Promise(function(resolve, reject) {
    var element = document.querySelector(selector);
    if ( element.value == "" ) {
      reject(element.dataset.error);
    } else {
      resolve(element);
    }
  });
}

• 프로미스 중간에 Error가 발생하면, catch()로 처리할 수 있다.
  

일반적인 프로미스는 한번에 하나의 프로미스만 응답한다.
ECMAScript 2015 에서는 여러개의 프로미스를 동시에 처리할 수 있도록 지원한다.

• Promise.all()
  여러개의 프로미스가 모두 성공했을 때 값을 반환한다.
  ShortCut 평가 수행.
• Promise.race()
  여러개의 프로미스 중 먼저 끝난 값을 반환한다. 나머지는 무시된다.

여러 개의 프로미스들이 모두 완료되었을 때 최종 결과값을 반환.
여러 개의 비동기 작업이 모두 완료된 이후 작업을 수행할 때 유용.

let btn = document.querySelector("#btn");
btn.onclick = function(event) { 
  let namePromise = validate("#name");
  let agePromise = validate("#age");
  let deptPromise = validate("#dept");
  let validateAll = Promise.all([namePromise, agePromise, deptPromise]);
  validateAll.then(function(value) {
    console.log(value[0].id);
    console.log(value[1].id);
    console.log(value[2].id);
  });
}
function validate(selector) {
  return new Promise(function(resolve, reject) {
    let element = document.querySelector(selector);
    if ( element.value == "" ) {
      reject(element.dataset.error);
    } else {
      resolve(element);
    }
  });
}