vue 개발 노트 - Promise 비동기 결과 대상

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

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

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

Promise 구조 함수는 하나의 함수를 매개 변수로 받아들인다. 이 함수의 두 매개 변수는 각각 resolve와 reject이다.이러한 함수는 JavaScript 엔진에서 직접 배포하지 않고도 사용할 수 있는 두 가지 함수입니다.resolve 함수는 Promise 대상의 상태를'미완성'에서'성공'(즉 Pending에서 Resolved)으로 바꾸고 비동기 작업이 성공했을 때 호출하여 비동기 작업의 결과를 매개 변수로 전달하는 역할을 한다.reject 함수는 Promise 객체의 상태를 "미완성"에서 "실패"(즉 Pending에서 Rejected)로 변경하고 비동기 작업이 실패했을 때 호출하며 비동기 작업이 보고된 오류를 매개 변수로 전달하는 역할을 한다.
Promise 인스턴스가 생성되면 then 방법을 사용하여 Resolved 상태와 Reject 상태의 콜백 함수를 각각 지정할 수 있습니다.

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

then 방법은 두 개의 리셋 함수를 매개 변수로 받아들일 수 있다.첫 번째 콜백 함수는 Promise 객체의 상태가 Resolved로 변경될 때 호출되고, 두 번째 콜백 함수는 Promise 객체의 상태가 Reject로 변경될 때 호출됩니다.그 중에서 두 번째 함수는 선택할 수 있는 것이기 때문에 반드시 제공해야 하는 것은 아니다.두 함수 모두 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가 마지막으로 출력됩니다.
다음은 그림을 비동기적으로 불러오는 예입니다.

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;
  });
}

다음은 Promise 객체로 구현된 Ajax 작업의 예입니다.

var getJSON = function(url) {
  var promise = new Promise(function(resolve, reject){
    var client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

    function handler() {
      if ( this.readyState !== 4 ) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
  });

  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 함수의 매개 변수는 정상적인 값을 제외하고는 또 다른 프로미스 실례일 수도 있다. 이는 비동기 조작의 결과가 하나의 값일 수도 있고 다른 비동기 조작일 수도 있다. 예를 들어 아래와 같다.

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

var 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의 리셋 함수는 즉시 실행될 것이다.

var p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})
var p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})
p2.then(result => console.log(result))
p2.catch(error => console.log(error))
// Error: fail

위 코드에서 p1는 하나의 Promise로 3초 후에 rejected로 변경됩니다.p2의 상태는 p1에 의해 결정되고 1초 후p2 호출resolve 방법은 이때p1의 상태는 변하지 않기 때문p2의 상태도 변하지 않는다.또 2초가 지나p1가 rejected로, p2도 rejected로 바뀌었다.