一、Promise的含義

• 所謂Promise，簡單說就是一個容器，裏面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise是一個對象，從它可以獲取異步操作的消息。

1、Promise對象兩大特點

1.對象的狀態不受外界影響

• Promise對象代表一個異步操作，有三種狀態：Pending（進行中）、Resolved（已完成，又稱Fulfilled）和Rejected（已失敗）。
• 只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。

2.一旦狀態改變，就不會再變，任何時候都可以得到這個結果。

• Promise對象的狀態改變，只有兩種可能：從Pending變為Resolved和從Pending變為Rejected。

二、基本用法

1、ES6規定，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(error) {
      // failure
    });

• then方法可以接受兩個回調函數作為參數。第一個回調函數是Promise對象的狀態變為Resolved時調用，第二個回調函數是Promise對象的狀態變為Reject時調用。其中，第二個函數是可選的，不一定要提供。這兩個函數都接受Promise對象傳出的值作為參數。

    function timeout(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, ‘done‘);
      });
    }
  
    timeout(100).then((value) => {
      console.log(value);
    });

三、Promise.prototype.then()

• Promise實例具有then方法，也就是說，then方法是定義在原型對象Promise.prototype上的。它的作用是為Promise實例添加狀態改變時的回調函數。

四、Promise.prototype.catch()

• Promise.prototype.catch方法是.then(null, rejection)的別名，用於指定發生錯誤時的回調函數。

五、Promise.all()

• Promise.all方法用於將多個Promise實例，包裝成一個新的Promise實例。

    var p = Promise.all([p1, p2, p3]);

六、Promise.race()

• Promise.race方法同樣是將多個Promise實例，包裝成一個新的Promise實例。

    var p = Promise.race([p1,p2,p3]);

七、Promise.resolve()

• 有時需要將現有對象轉為Promise對象，Promise.resolve方法就起到這個作用。

    var jsPromise = Promise.resolve($.ajax(‘/whatever.json‘));

• Promise.resolve等價於下面的寫法。

    Promise.resolve(‘foo‘)
    // 等價於
    new Promise(resolve => resolve(‘foo‘))

Promise.resolve方法的參數分成四種情況。

（1）參數是一個Promise實例

• 如果參數是Promise實例，那麽Promise.resolve將不做任何修改、原封不動地返回這個實例。

（2）參數是一個thenable對象

• thenable對象指的是具有then方法的對象，比如下面這個對象。

    let thenable = {
      then: function(resolve, reject) {
        resolve(42);
      }
    };

• Promise.resolve方法會將這個對象轉為Promise對象，然後就立即執行thenable對象的then方法。

    let thenable = {
      then: function(resolve, reject) {
        resolve(42);
      }
    };
  
    let p1 = Promise.resolve(thenable);
    p1.then(function(value) {
      console.log(value);  // 42
    });

• 上面代碼中，thenable對象的then方法執行後，對象p1的狀態就變為resolved，從而立即執行最後那個then方法指定的回調函數，輸出42。

（3）參數不是具有then方法的對象，或根本就不是對象

• 如果參數是一個原始值，或者是一個不具有then方法的對象，則Promise.resolve方法返回一個新的Promise對象，狀態為Resolved。

    var p = Promise.resolve(‘Hello‘);
  
    p.then(function (s){
      console.log(s)
    });
    // Hello

• 上面代碼生成一個新的Promise對象的實例p。由於字符串Hello不屬於異步操作（判斷方法是它不是具有then方法的對象），返回Promise實例的狀態從一生成就是Resolved，所以回調函數會立即執行。Promise.resolve方法的參數，會同時傳給回調函數。

（4）不帶有任何參數

• Promise.resolve方法允許調用時不帶參數，直接返回一個Resolved狀態的Promise對象。

八、Promise.reject()

• Promise.reject(reason)方法也會返回一個新的Promise實例，該實例的狀態為rejected。它的參數用法與Promise.resolve方法完全一致。

    var p = Promise.reject(‘出錯了‘);
    // 等同於
    var p = new Promise((resolve, reject) => reject(‘出錯了‘))
  
    p.then(null, function (s){
      console.log(s)
    });
    // 出錯了

九、兩個有用的附加方法

1.done()

• Promise對象的回調鏈，不管以then方法或catch方法結尾，要是最後一個方法拋出錯誤，都有可能無法捕捉到（因為Promise內部的錯誤不會冒泡到全局）。因此，我們可以提供一個done方法，總是處於回調鏈的尾端，保證拋出任何可能出現的錯誤。

    asyncFunc()
      .then(f1)
      .catch(r1)
      .then(f2)
      .done();

• 它的實現代碼相當簡單。

    Promise.prototype.done = function (onFulfilled, onRejected) {
      this.then(onFulfilled, onRejected)
        .catch(function (reason) {
          // 拋出一個全局錯誤
          setTimeout(() => { throw reason }, 0);
        });
    };

2.finally()

• finally方法用於指定不管Promise對象最後狀態如何，都會執行的操作。它與done方法的最大區別，它接受一個普通的回調函數作為參數，該函數不管怎樣都必須執行。

• 服務器使用Promise處理請求，然後使用finally方法關掉服務器。

    server.listen(0)
      .then(function () {
        // run test
      })
      .finally(server.stop);

• 它的實現也很簡單。

    Promise.prototype.finally = function (callback) {
      let P = this.constructor;
      return this.then(
        value  => P.resolve(callback()).then(() => value),
        reason => P.resolve(callback()).then(() => { throw reason })
      );
    };

十、應用

1、加載圖片

• 我們可以將圖片的加載寫成一個Promise，一旦加載完成，Promise的狀態就發生變化。

    const preloadImage = function (path) {
      return new Promise(function (resolve, reject) {
        var image = new Image();
        image.onload  = resolve;
        image.onerror = reject;
        image.src = path;
      });
    };

2、Generator函數與Promise的結合

• 使用Generator函數管理流程，遇到異步操作的時候，通常返回一個Promise對象。

    function getFoo () {
      return new Promise(function (resolve, reject){
        resolve(‘foo‘);
      });
    }
  
    var g = function* () {
      try {
        var foo = yield getFoo();
        console.log(foo);
      } catch (e) {
        console.log(e);
      }
    };
  
    function run (generator) {
      var it = generator();
  
      function go(result) {
        if (result.done) return result.value;
  
        return result.value.then(function (value) {
          return go(it.next(value));
        }, function (error) {
          return go(it.throw(error));
        });
      }
  
      go(it.next());
    }
  
    run(g);

• 面代碼的Generator函數g之中，有一個異步操作getFoo，它返回的就是一個Promise對象。函數run用來處理這個Promise對象，並調用下一個next方法。

簡單例子

    let state = 1;
    function step1(resolve,reject){
        console.log(‘1-開始洗菜做飯‘);
        if( state == 1){
            resolve(‘洗菜做飯完成‘);
        }else {
            reject(‘洗菜做飯出錯‘);
        }
    }

    function step2(resolve,reject){
        console.log(‘2-開始-坐下來吃飯‘);
        if (state == 1) {
            resolve(‘坐下來吃飯完成‘);
        }else {
            reject(‘坐下來吃飯出錯‘);
        }
    }

    function step3(resolve,reject) {
        console.log(‘3-開始收拾桌子洗碗‘);
        if(state==1){
            resolve(‘收拾桌子洗碗完成‘);
        }else{
            reject(‘收拾桌子洗碗出錯‘)
        }
    }

    new Promise(step1).then(function(val){
        console.log(val);
        return new Promise(step2);
    }).then(function(val){
        console.log(val);
        return new Promise(step3);
    }).then(function(val){
        console.log(val);
        return val;
    })

ECMAScript 6 Promise 對象