1、含義
所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。
Promise對象有以下兩個特點。
（1）對象的狀態(tài)不受外界影響。Promise對象代表一個異步操作，有三種狀態(tài)：Pending（進(jìn)行中）、Resolved（已完成，又稱 Fulfilled）和Rejected（已失?。?。只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)。這也是Promise這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。
（2）一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結(jié)果。Promise對象的狀態(tài)改變，只有兩種可能：從Pending變?yōu)镽esolved和從Pending變?yōu)镽ejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個結(jié)果。如果改變已經(jīng)發(fā)生了，你再對Promise對象添加回調(diào)函數(shù)，也會立即得到這個結(jié)果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監(jiān)聽，是得不到結(jié)果的。

有了Promise對象，就可以將異步操作以同步操作的流程表達(dá)出來，避免了層層嵌套的回調(diào)函數(shù)。此外，Promise對象提供統(tǒng)一的接口，使得控制異步操作更加容易。
Promise也有一些缺點。首先，無法取消Promise，一旦新建它就會立即執(zhí)行，無法中途取消。其次，如果不設(shè)置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯誤，不會反應(yīng)到外部。第三，當(dāng)處于Pending狀態(tài)時，無法得知目前進(jìn)展到哪一個階段（剛剛開始還是即將完成）

2、基本用法
ES6規(guī)定，Promise對象是一個構(gòu)造函數(shù)，用來生成Promise實例。

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

  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

//Promise實例生成以后，可以用then方法分別指定Resolved狀態(tài)和Reject狀態(tài)的回調(diào)函數(shù)。
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

Promise新建后立即執(zhí)行，所以首先輸出的是“Promise”。然后，then方法指定的回調(diào)函數(shù)，將在當(dāng)前腳本所有同步任務(wù)執(zhí)行完才會執(zhí)行，所以“Resolved”最后輸出。

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

// Promise
// Hi!
// Resolved

使用Promise包裝了一個圖片加載的異步操作。如果加載成功，就調(diào)用resolve方法，否則就調(diào)用reject方法。

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對象實現(xiàn)的Ajax操作,getJSON是對XMLHttpRequest對象的封裝，用于發(fā)出一個針對JSON數(shù)據(jù)的HTTP請求，并且返回一個Promise對象。需要注意的是，在getJSON內(nèi)部，resolve函數(shù)和reject函數(shù)調(diào)用時，都帶有參數(shù)。

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);
});

下面代碼中，p1和p2都是Promise的實例，但是p2的resolve方法將p1作為參數(shù)，即一個異步操作的結(jié)果是返回另一個異步操作。

注意，這時p1的狀態(tài)就會傳遞給p2，也就是說，p1的狀態(tài)決定了p2的狀態(tài)。如果p1的狀態(tài)是Pending，那么p2的回調(diào)函數(shù)就會等待p1的狀態(tài)改變；如果p1的狀態(tài)已經(jīng)是Resolved或者Rejected，那么p2的回調(diào)函數(shù)將會立刻執(zhí)行。

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

如圖

1.png

p1是一個Promise，3秒之后變?yōu)閞ejected。p2的狀態(tài)在1秒之后改變，resolve方法返回的是p1。由于p2返回的是另一個 Promise，導(dǎo)致p2自己的狀態(tài)無效了，由p1的狀態(tài)決定p2的狀態(tài)。所以，后面的then語句都變成針對后者（p1）。又過了2秒，p1變?yōu)閞ejected，導(dǎo)致觸發(fā)catch方法指定的回調(diào)函數(shù)，同時執(zhí)行的時間是累加的。

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))
  .catch(error => console.log(error))
// Error: fail

3、Promise.prototype.then()
在討論這個方法之前，我們先看下這個問題。

Promise對象狀態(tài)

三個狀態(tài)：
pending（執(zhí)行中）
fulfilled（成功）
reject（拒絕）
其中pending為初始狀態(tài)，fulfilled和rejected為結(jié)束狀態(tài)（結(jié)束狀態(tài)表示promise的生命周期已結(jié)束）。

pending->fulfilled，pending->rejected。

promise.then(onFulfilled, onRejected);

我們可以了解到then()方法是Promise實例的方法，即Promise.prototype上的，它的作用是為Promise實例添加狀態(tài)改變時的回調(diào)函數(shù)，這個方法的第一個參數(shù)是resolved狀態(tài)的回調(diào)函數(shù)，第二個參數(shù)（可選）是rejected狀態(tài)的回調(diào)函數(shù)。

那么then()方法的返回值是什么？then方法會返回一個新的Promise實例（注意，不是原來那個Promise，原來那個Promise已經(jīng)承諾過，此時繼續(xù)then就需要新的承諾~~），這樣的設(shè)計的好處就是可以使用鏈?zhǔn)綄懛ā?/p>

還有一個點，就是鏈?zhǔn)街械膖hen方法（第二個開始），它們的resolve中的參數(shù)是什么？答案就是前一個then()中resolve的return語句的返回值。

舉個栗子

var p1 = new Promise( (resolve, reject) => {
    setTimeout(() => resolve('p1'), 10);
});

p1.then( ret => {
    console.log(ret);  //p1
    return 'then1';
}).then( ret => {
    console.log(ret);  //then1
    return 'then2';
}).then( ret => {
    console.log(ret);  //then2
});

回到ajax getJSON
采用鏈?zhǔn)降膖hen，可以指定一組按照次序調(diào)用的回調(diào)函數(shù)。這時，前一個回調(diào)函數(shù)，有可能返回的還是一個Promise對象（即有異步操作），這時后一個回調(diào)函數(shù)，就會等待該Promise對象的狀態(tài)發(fā)生變化，才會被調(diào)用。
第一個then方法指定的回調(diào)函數(shù)，返回的是另一個Promise對象。這時，第二個then方法指定的回調(diào)函數(shù)，就會等待這個新的Promise對象狀態(tài)發(fā)生變化。如果變?yōu)镽esolved，就調(diào)用funcA，如果狀態(tài)變?yōu)镽ejected，就調(diào)用funcB。

//第二個then里面返回了2個方法的參數(shù) onFulfilled, onRejected
getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function funcA(comments) {
  console.log("Resolved: ", comments);
}, function funcB(err){
  console.log("Rejected: ", err);
});

箭頭函數(shù)表示：

getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)
).then(
  comments => console.log("Resolved: ", comments),
  err => console.log("Rejected: ", err)
);

4、Promise.prototype.catch()
1）Promise.prototype.catch方法是.then(null, rejection)的別名，用于指定發(fā)生錯誤時的回調(diào)函數(shù)。

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 處理 getJSON 和 前一個回調(diào)函數(shù)運行時發(fā)生的錯誤
  console.log('發(fā)生錯誤！', error);
});

2）如果Promise狀態(tài)已經(jīng)變成Resolved，再拋出錯誤是無效的。

var promise = new Promise(function(resolve, reject) {
  resolve('ok');
  throw new Error('test');
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });
// ok

3）Promise 對象的錯誤具有“冒泡”性質(zhì)，會一直向后傳遞，直到被捕獲為止。
4）跟傳統(tǒng)的try/catch代碼塊不同的是，如果沒有使用catch方法指定錯誤處理的回調(diào)函數(shù)，Promise對象拋出的錯誤不會傳遞到外層代碼，即不會有任何反應(yīng)。

5、 Promise對象方法

Promise.all()

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

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

上面代碼中，Promise.all方法接受一個數(shù)組作為參數(shù)，p1、p2、p3都是Promise對象的實例，如果不是，就會先調(diào)用下面講到的Promise.resolve方法，將參數(shù)轉(zhuǎn)為Promise實例，再進(jìn)一步處理。（Promise.all方法的參數(shù)可以不是數(shù)組，但必須具有Iterator接口，且返回的每個成員都是Promise實例。）
p的狀態(tài)由p1、p2、p3決定，分成兩種情況。
（1）只有p1、p2、p3的狀態(tài)都變成fulfilled，p的狀態(tài)才會變成fulfilled，此時p1、p2、p3的返回值組成一個數(shù)組，傳遞給p的回調(diào)函數(shù)。
（2）只要p1、p2、p3之中有一個被rejected，p的狀態(tài)就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調(diào)函數(shù)。

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

Promise.race()

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

不同的是，只要p1, p2, p3中任意一個實例率先改變狀態(tài)，則p的狀態(tài)就跟著改變，而且狀態(tài)由率先改變的實例決定。

Promise.resolve()

（1）參數(shù)是一個Promise實例
（2）參數(shù)是一個thenable對象
（3）參數(shù)不是具有then方法的對象，或根本就不是對象
（4）不帶有任何參數(shù)

Promise.reject()

兩個有用的附加方法

1）done()
Promise對象的回調(diào)鏈，不管以then方法或catch方法結(jié)尾，要是最后一個方法拋出錯誤，都有可能無法捕捉到（因為Promise內(nèi)部的錯誤不會冒泡到全局）。因此，我們可以提供一個done方法，總是處于回調(diào)鏈的尾端，保證拋出任何可能出現(xiàn)的錯誤。

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

2）finally()
finally方法用于指定不管Promise對象最后狀態(tài)如何，都會執(zhí)行的操作。它與done方法的最大區(qū)別，它接受一個普通的回調(diào)函數(shù)作為參數(shù)，該函數(shù)不管怎樣都必須執(zhí)行。

6、Generator函數(shù)與Promise的結(jié)合

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);

相關(guān)參考說明
關(guān)于Generator ：http://www.cnblogs.com/diligenceday/p/5488037.html
推薦：http://www.tuicool.com/articles/aeMFnir
提升：https://segmentfault.com/a/1190000007255138
http://blog.csdn.net/charlene0824/article/details/51955256

若有不足之處還請為我指出。