ES6 promise 사용(전재)

1. Promise의 의미

Promise는 비동기 프로그래밍의 해결 방안으로 전통적인 해결 방안인 리셋 함수와 이벤트보다 더욱 합리적이고 강력하다.이는 지역사회가 최초로 제기하고 실현한 것으로 ES6는 이를 언어 표준에 넣고 용법을 통일시켰으며 원생은 프로미스 대상을 제공했다.
이른바 Promise란 쉽게 말하면 하나의 용기로 그 안에 미래에 끝날 사건(보통 비동기적인 조작)의 결과가 보존되어 있다.문법적으로 Promise는 비동기적인 조작에 대한 정보를 얻을 수 있는 대상이다.Promise는 다양한 비동기식 작업을 동일한 방법으로 처리할 수 있는 통합 API를 제공합니다.
Promise 객체에는 다음과 같은 두 가지 특성이 있습니다.
(1) 대상의 상태가 외부의 영향을 받지 않는다.Promise 대상은 세 가지 상태가 있는데 그것이 바로 pending (진행 중),fulfilled (성공),rejected (실패) 이다.비동기 조작의 결과만 현재 어떤 상태인지 결정할 수 있으며, 그 어떠한 다른 조작도 이 상태를 바꿀 수 없다.프로미스라는 이름의 유래이기도 하다. 영어로는'약속'이라는 뜻으로 다른 수단을 바꿀 수 없다는 뜻이다.
(2) 일단 상태가 바뀌면 다시 변하지 않고 언제든지 이 결과를 얻을 수 있다.Promise 대상의 상태가 바뀔 수 있는 것은 두 가지입니다. pending에서fulfilled로 바뀔 수 있고, pending에서rejected로 바뀔 수 있습니다.이 두 가지 상황이 발생하기만 하면 상태가 응고되고 더 이상 변하지 않으며 이 결과를 계속 유지할 것이다. 이때를 Resolved(정형화)라고 부른다.만약 변경이 이미 발생했다면, Promise 대상에 리셋 함수를 추가하면, 즉시 이 결과를 얻을 수 있습니다.이것은 이벤트 (Event) 와 완전히 다르다. 이벤트의 특징은 그것을 놓치면 다시 감청하면 결과를 얻을 수 없다는 것이다.
본장 뒤의 Resolved는fulfilled상태만 가리키며 Rejected상태는 포함하지 않습니다.
Promise 대상이 있으면 비동기 조작을 동기화 조작의 절차로 표현할 수 있어 겹겹이 끼워 넣은 리셋 함수를 피할 수 있다.이 밖에 Promise 대상은 통일된 인터페이스를 제공하여 비동기적인 조작을 제어하는 것을 더욱 쉽게 한다.
프로미스도 단점이 있다.먼저 Promise를 취소할 수 없으며 새로 만들면 즉시 실행되며 중간에 취소할 수 없습니다.그 다음으로 리셋 함수를 설정하지 않으면 프로미스 내부에서 던진 오류가 외부에 반응하지 않습니다.셋째, pending 상태에 있을 때 현재 어느 단계까지 진전되었는지 알 수 없다(방금 시작했는지 곧 완성할 것인지).

2.기본용법

ES6에 따르면 Promise 객체는 Promise 인스턴스를 생성하는 데 사용되는 구조 함수입니다.
다음 코드는 Promise 실례를 만들었습니다.

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/*   */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise 구조 함수는 하나의 함수를 매개 변수로 받아들인다. 이 함수의 두 매개 변수는 각각 Resolve와 Reject이다.이러한 함수는 JavaScript 엔진에서 직접 배포하지 않고도 사용할 수 있는 두 가지 함수입니다.
resolve 함수의 역할은Promise 대상의 상태를'미완성'에서'성공'(즉pending에서resolved)으로 바꾸고 비동기 조작이 성공할 때 호출하며 비동기 조작의 결과를 매개 변수로 전달하는 것이다.프로젝트 함수의 역할은 Promise 대상의 상태를 '미완성' 에서 '실패' (즉 pending에서 Rejected) 로 바꾸고, 비동기 작업이 실패할 때 호출하며, 비동기 작업이 보고한 오류를 매개 변수로 전달하는 것입니다.
Promise 실례가 생성된 후, then 방법으로 각각 Resolved 상태와 Rejected 상태의 리셋 함수를 지정할 수 있습니다.

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then 방법은 두 개의 리셋 함수를 매개 변수로 받아들일 수 있다.첫 번째 리셋 함수는 Promise 대상의 상태가 Resolved로 변할 때 호출되고, 두 번째 리셋 함수는 Promise 대상의 상태가 Rejected로 변할 때 호출된다.그 중에서 두 번째 함수는 선택할 수 있는 것이기 때문에 반드시 제공해야 하는 것은 아니다.두 함수 모두 Promise 객체에서 전송된 값을 매개변수로 받아들입니다.
다음은 Promise 객체의 간단한 예입니다.

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});

위 코드에서timeout 방법은Promise의 실례를 되돌려줍니다. 이것은 일정 시간 후에야 발생하는 결과를 나타냅니다.지정한 시간 (ms 매개 변수) 이 지나면 Promise 실례의 상태가 Resolved로 바뀌면then 방법으로 연결된 리셋 함수를 터치합니다.
Promise가 새로 만들어지면 즉시 실행됩니다.

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

위 코드에서 Promise는 새로 만든 후 바로 실행하기 때문에 먼저 Promise를 출력합니다.그리고 then 방법이 지정한 리셋 함수는 현재 스크립트의 모든 동기화 작업이 실행되어야 실행되기 때문에 Resolved가 마지막으로 출력합니다.다음은 Promise 객체로 구현된 Ajax 작업의 예입니다.

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error(' ', error);
});

위 코드에서 getJSON은 XMLHttpRequest 대상에 대한 봉인으로 JSON 데이터에 대한 HTTP 요청을 보내고 Promise 대상을 되돌려줍니다.주의해야 할 것은 getJSON 내부에서 resolve 함수와 Reject 함수를 호출할 때 모두 파라미터가 있습니다.resolve 함수와reject 함수를 호출할 때 인자가 있으면, 인자는 리셋 함수에 전달됩니다.Reject 함수의 매개 변수는 일반적으로 Error 객체의 인스턴스로 버퍼링 오류를 나타냅니다.resolve 함수의 매개 변수는 정상적인 값 이외에 다른 Promise 실례일 수도 있습니다. 예를 들어 아래와 같습니다.

const p1 = new Promise(function (resolve, reject) {
  // ...
});

const p2 = new Promise(function (resolve, reject) {
  // ...
  resolve(p1);
})

위 코드에서 p1과 p2는 모두Promise의 실례이지만 p2의resolve 방법은 p1을 매개 변수로 한다. 즉, 하나의 비동기 조작의 결과는 다른 비동기 조작으로 되돌아가는 것이다.
주의, 이때 p1의 상태는 p2에 전달된다. 즉, p1의 상태가 p2의 상태를 결정한다.만약 p1의 상태가 pending이라면 p2의 리셋 함수는 p1의 상태 변화를 기다릴 것이다.만약 p1의 상태가 이미 Resolved나rejected라면 p2의 리셋 함수는 즉시 실행될 것입니다.

onst p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})

const p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error))
// Error: fail

위 코드에서 p1은 Promise로 3초 후에 Rejected로 변경됩니다.p2의 상태가 1초 후에 바뀌고resolve 방법이 p1로 되돌아온다.p2가 다른 Promise로 되돌아오기 때문에 p2의 상태가 무효가 되었고 p1의 상태가 p2의 상태를 결정합니다.그래서 뒤의then문장은 모두 후자(p1)를 겨냥한 것이다.2초가 지나자 p1이rejected로 바뀌어catch 방법이 지정한 리셋 함수를 터치합니다.