什麼是Promise

所謂 Promise，就是一個物件，用來傳遞非同步操作的訊息。它代表了某個未來才會知道結果的事件（通常是一個非同步操作），並且這個事件提供統一的 API，可供進一步處理。

Promise的作用

Promise的出現主要是解決地獄回撥的問題，比如你需要結果需要請求很多個介面，這些介面的引數需要另外那個的介面返回的資料作為依賴，這樣就需要我們一層巢狀一層，但是有了Promise 我們就無需巢狀

Promise的本質

我認為Promise的本質就是分離了非同步資料獲取和業務邏輯

基本的 api

1. Promise.resolve()

2. Promise.reject()

3. Promise.prototype.then()

4. Promise.prototype.catch()

5. Promise.all() // 所有的完成

6. Promise.all([p1,p2,p3])
   

基礎案例

Promise 建構函式接受一個函式作為引數，該函式的兩個引數分別是 resolve 方法和 reject 方法。

var promise = new Promise(function(resolve, reject) {
 if (/* 非同步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

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

ajax的傳統寫法

getData(method, url, successFun, failFun){
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open(method, url);
  xmlHttp.send();
  xmlHttp.onload = function () {
    if (this.status == 200 ) {
      successFun(this.response);
    } else {
      failFun(this.statusText);
    }
  };
  xmlHttp.onerror = function () {
    failFun(this.statusText);
  };
}

改為 Promise寫法

getData(method, url){
  return new Promise(function(resolve, reject){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open(method, url);
    xmlHttp.send();
    xmlHttp.onload = function () {
      if (this.status == 200 ) {
        resolve(this.response);
      } else {
        reject(this.statusText);
      }
    };
    xmlHttp.onerror = function () {
      reject(this.statusText);
    };
  })
}

getData('get','www.xxx.com').then(successFun, failFun)