Promise 코드 일목요연

ES6 의 Promise 는 js 리 턴 지역 의 문 제 를 해 결 했 고 원 리 는 자세히 말 하지 않 고 직접 용법 을 말 했다.
1. 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);
});

여러 개의 순차 적 인 인터페이스 호출 이 있다 면?
1. 내장 호출

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

2. 체인 호출 (Promise 에서 Promise 를 되 돌려 줍 니 다)

getJSON("/first.json").then(function (first) {
  console.log('Contents: ' + first);
  return new Promise((resolve => resolve(first)))
}).then((first)=>{
  getJSON("/second.json").then(function (second) {
    console.log('Contents: ' + second);
    return new Promise((resolve => resolve(second)))
  })
}).then((second)=>{
  getJSON("/third.json").then(function (third) {
    console.log('Contents: ' + third);
  })
})

체인 호출 의 장점 은 선후 관계 만 한눈 에 알 수 있 고 논 리 를 한눈 에 볼 수 있다 는 것 이다.