概述

Promise 對(duì)象是 JavaScript 的異步操作解決方案，為異步操作提供統(tǒng)一接口。它起到代理作用（proxy），充當(dāng)異步操作與回調(diào)函數(shù)之間的中介，使得異步操作具備同步操作的接口。Promise 可以讓異步操作寫起來，就像在寫同步操作的流程，而不必一層層地嵌套回調(diào)函數(shù)。
首先，Promise 是一個(gè)對(duì)象，也是一個(gè)構(gòu)造函數(shù)。

function f1(resolve, reject) {
  // 異步代碼...
}
let p1 = new Promise(f1);

上面代碼中，Promise構(gòu)造函數(shù)接受一個(gè)回調(diào)函數(shù)f1作為參數(shù)，f1里面是異步操作的代碼。然后，返回的p1就是一個(gè) Promise 實(shí)例。
Promise 的設(shè)計(jì)思想是，所有異步任務(wù)都返回一個(gè) Promise 實(shí)例。Promise 實(shí)例有一個(gè)then方法，用來指定下一步的回調(diào)函數(shù)。

let p1 = new Promise(f1);
p1.then(f2);

上面代碼中，f1的異步操作執(zhí)行完成，就會(huì)執(zhí)行f2。
傳統(tǒng)的寫法可能需要把f2作為回調(diào)函數(shù)傳入f1，比如寫成f1(f2)，異步操作完成后，在f1內(nèi)部調(diào)用f2。Promise 使得f1和f2變成了鏈?zhǔn)綄懛ā２粌H改善了可讀性，而且對(duì)于多層嵌套的回調(diào)函數(shù)尤其方便。

// 傳統(tǒng)寫法
step1(function (value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        // ...
      });
    });
  });
});
// Promise 的寫法
(new Promise(step1))
  .then(step2)
  .then(step3)
  .then(step4);

從上面代碼可以看到，采用 Promises 以后，程序流程變得非常清楚，十分易讀。注意，為了便于理解，上面代碼的Promise實(shí)例的生成格式，做了簡(jiǎn)化，真正的語(yǔ)法請(qǐng)參照下文。
總的來說，傳統(tǒng)的回調(diào)函數(shù)寫法使得代碼混成一團(tuán)，變得橫向發(fā)展而不是向下發(fā)展。Promise 就是解決這個(gè)問題，使得異步流程可以寫成同步流程。
Promise 原本只是社區(qū)提出的一個(gè)構(gòu)想，一些函數(shù)庫(kù)率先實(shí)現(xiàn)了這個(gè)功能。ECMAScript 6 將其寫入語(yǔ)言標(biāo)準(zhǔn)，目前 JavaScript 原生支持 Promise 對(duì)象。

Promise 對(duì)象的狀態(tài)

Promise 對(duì)象通過自身的狀態(tài)，來控制異步操作。Promise 實(shí)例具有三種狀態(tài)。

異步操作未完成（pending）
異步操作成功（fulfilled）
異步操作失敗（rejected）
上面三種狀態(tài)里面，fulfilled和rejected合在一起稱為resolved（已定型）。

這三種的狀態(tài)的變化途徑只有兩種。

從“未完成”到“成功”
從“未完成”到“失敗”

一旦狀態(tài)發(fā)生變化，就凝固了，不會(huì)再有新的狀態(tài)變化。這也是 Promise 這個(gè)名字的由來，它的英語(yǔ)意思是“承諾”，一旦承諾成效，就不得再改變了。這也意味著，Promise 實(shí)例的狀態(tài)變化只可能發(fā)生一次。
因此，Promise 的最終結(jié)果只有兩種。

異步操作成功，Promise 實(shí)例傳回一個(gè)值（value），狀態(tài)變?yōu)閒ulfilled。
異步操作失敗，Promise 實(shí)例拋出一個(gè)錯(cuò)誤（error），狀態(tài)變?yōu)閞ejected。

Promise 構(gòu)造函數(shù)

JavaScript 提供原生的Promise構(gòu)造函數(shù)，用來生成 Promise 實(shí)例。

let promise = new Promise(function (resolve, reject) {
  // ...
  if (/* 異步操作成功 */){
    resolve(value);
  } else { /* 異步操作失敗 */
    reject(new Error());
  }
});

上面代碼中，Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject。它們是兩個(gè)函數(shù)，由 JavaScript 引擎提供，不用自己實(shí)現(xiàn)。
resolve函數(shù)的作用是，將Promise實(shí)例的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸膒ending變?yōu)閒ulfilled），在異步操作成功時(shí)調(diào)用，并將異步操作的結(jié)果，作為參數(shù)傳遞出去。reject函數(shù)的作用是，將Promise實(shí)例的狀態(tài)從“未完成”變?yōu)椤笆　保磸膒ending變?yōu)閞ejected），在異步操作失敗時(shí)調(diào)用，并將異步操作報(bào)出的錯(cuò)誤，作為參數(shù)傳遞出去。
下面是一個(gè)例子。

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}
timeout(100)

上面代碼中，timeout(100)返回一個(gè) Promise 實(shí)例。100毫秒以后，該實(shí)例的狀態(tài)會(huì)變?yōu)閒ulfilled。

Promise.prototype.then()

Promise 實(shí)例的then方法，用來添加回調(diào)函數(shù)。
then方法可以接受兩個(gè)回調(diào)函數(shù)，第一個(gè)是異步操作成功時(shí)（變?yōu)閒ulfilled狀態(tài)）時(shí)的回調(diào)函數(shù)，第二個(gè)是異步操作失敗（變?yōu)閞ejected）時(shí)的回調(diào)函數(shù)（該參數(shù)可以省略）。一旦狀態(tài)改變，就調(diào)用相應(yīng)的回調(diào)函數(shù)。

let p1 = new Promise(function (resolve, reject) {
  resolve('成功');
});
p1.then(console.log, console.error);
// "成功"

let p2 = new Promise(function (resolve, reject) {
  reject(new Error('失敗'));
});
p2.then(console.log, console.error);
// Error: 失敗

上面代碼中，p1和p2都是Promise 實(shí)例，它們的then方法綁定兩個(gè)回調(diào)函數(shù)：成功時(shí)的回調(diào)函數(shù)console.log，失敗時(shí)的回調(diào)函數(shù)console.error（可以省略）。p1的狀態(tài)變?yōu)槌晒Γ琾2的狀態(tài)變?yōu)槭。瑢?duì)應(yīng)的回調(diào)函數(shù)會(huì)收到異步操作傳回的值，然后在控制臺(tái)輸出。
then方法可以鏈?zhǔn)绞褂谩?/p>

p1
  .then(step1)
  .then(step2)
  .then(step3)
  .then(
    console.log,
    console.error
  );

上面代碼中，p1后面有四個(gè)then，意味依次有四個(gè)回調(diào)函數(shù)。只要前一步的狀態(tài)變?yōu)閒ulfilled，就會(huì)依次執(zhí)行緊跟在后面的回調(diào)函數(shù)。
最后一個(gè)then方法，回調(diào)函數(shù)是console.log和console.error，用法上有一點(diǎn)重要的區(qū)別。console.log只顯示step3的返回值，而console.error可以顯示p1、step1、step2、step3之中任意一個(gè)發(fā)生的錯(cuò)誤。舉例來說，如果step1的狀態(tài)變?yōu)閞ejected，那么step2和step3都不會(huì)執(zhí)行了（因?yàn)樗鼈兪莚esolved的回調(diào)函數(shù)）。Promise 開始尋找，接下來第一個(gè)為rejected的回調(diào)函數(shù)，在上面代碼中是console.error。這就是說，Promise 對(duì)象的報(bào)錯(cuò)具有傳遞性。

then() 用法辨析

Promise 的用法，簡(jiǎn)單說就是一句話：使用then方法添加回調(diào)函數(shù)。但是，不同的寫法有一些細(xì)微的差別，請(qǐng)看下面四種寫法，它們的差別在哪里？

// 寫法一
f1().then(function () {
  return f2();
});
// 寫法二
f1().then(function () {
  f2();
});
// 寫法三
f1().then(f2());
// 寫法四
f1().then(f2);

為了便于講解，下面這四種寫法都再用then方法接一個(gè)回調(diào)函數(shù)f3。寫法一的f3回調(diào)函數(shù)的參數(shù)，是f2函數(shù)的運(yùn)行結(jié)果。

f1().then(function () {
  return f2();
}).then(f3);

寫法二的f3回調(diào)函數(shù)的參數(shù)是undefined。

f1().then(function () {
  f2();
  return;
}).then(f3);

寫法三的f3回調(diào)函數(shù)的參數(shù)，是f2函數(shù)返回的函數(shù)的運(yùn)行結(jié)果。

f1().then(f2())
  .then(f3);

寫法四與寫法一只有一個(gè)差別，那就是f2會(huì)接收到f1()返回的結(jié)果。

f1().then(f2)
  .then(f3);

Promise 的應(yīng)用

1.加載圖片
我們可以把圖片的加載寫成一個(gè)Promise對(duì)象。

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

2.Ajax 操作
Ajax 操作是典型的異步操作，傳統(tǒng)上往往寫成下面這樣。

function search(term, onload, onerror) {
  let xhr, results, url;
  url = 'http://example.com/search?q=' + term;

  xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);

  xhr.onload = function (e) {
    if (this.status === 200) {
      results = JSON.parse(this.responseText);
      onload(results);
    }
  };
  xhr.onerror = function (e) {
    onerror(e);
  };

  xhr.send();
}
search('Hello World', console.log, console.error);

如果使用 Promise 對(duì)象，就可以寫成下面這樣。

function search(term) {
  let url = 'http://example.com/search?q=' + term;
  let xhr = new XMLHttpRequest();
  let result;

  let p = new Promise(function (resolve, reject) {
    xhr.open('GET', url, true);
    xhr.onload = function (e) {
      if (this.status === 200) {
        result = JSON.parse(this.responseText);
        resolve(result);
      }
    };
    xhr.onerror = function (e) {
      reject(e);
    };
    xhr.send();
  });

  return p;
}
search('Hello World').then(console.log, console.error);

加載圖片的例子，也可以用 Ajax 操作完成。

function imgLoad(url) {
  return new Promise(function (resolve, reject) {
    let request = new XMLHttpRequest();
    request.open('GET', url);
    request.responseType = 'blob';
    request.onload = function () {
      if (request.status === 200) {
        resolve(request.response);
      } else {
        reject(new Error('圖片加載失敗：' + request.statusText));
      }
    };
    request.onerror = function () {
      reject(new Error('發(fā)生網(wǎng)絡(luò)錯(cuò)誤'));
    };
    request.send();
  });
}

總結(jié)

Promise 的優(yōu)點(diǎn)在于，讓回調(diào)函數(shù)變成了規(guī)范的鏈?zhǔn)綄懛ǎ绦蛄鞒炭梢钥吹煤芮宄Ｋ幸徽捉涌冢梢詫?shí)現(xiàn)許多強(qiáng)大的功能，比如同時(shí)執(zhí)行多個(gè)異步操作，等到它們的狀態(tài)都改變以后，再執(zhí)行一個(gè)回調(diào)函數(shù)；再比如，為多個(gè)回調(diào)函數(shù)中拋出的錯(cuò)誤，統(tǒng)一指定處理方法等等。
而且，Promise 還有一個(gè)傳統(tǒng)寫法沒有的好處：它的狀態(tài)一旦改變，無論何時(shí)查詢，都能得到這個(gè)狀態(tài)。這意味著，無論何時(shí)為 Promise 實(shí)例添加回調(diào)函數(shù)，該函數(shù)都能正確執(zhí)行。所以，你不用擔(dān)心是否錯(cuò)過了某個(gè)事件或信號(hào)。如果是傳統(tǒng)寫法，通過監(jiān)聽事件來執(zhí)行回調(diào)函數(shù)，一旦錯(cuò)過了事件，再添加回調(diào)函數(shù)是不會(huì)執(zhí)行的。
Promise 的缺點(diǎn)是，編寫的難度比傳統(tǒng)寫法高，而且閱讀代碼也不是一眼可以看懂。你只會(huì)看到一堆then，必須自己在then的回調(diào)函數(shù)里面理清邏輯。

微任務(wù)

Promise 的回調(diào)函數(shù)屬于異步任務(wù)，會(huì)在同步任務(wù)之后執(zhí)行。

new Promise(function (resolve, reject) {
  resolve(1);
}).then(console.log);

console.log(2);
// 2
// 1

上面代碼會(huì)先輸出2，再輸出1。因?yàn)閏onsole.log(2)是同步任務(wù)，而then的回調(diào)函數(shù)屬于異步任務(wù)，一定晚于同步任務(wù)執(zhí)行。
但是，Promise 的回調(diào)函數(shù)不是正常的異步任務(wù)，而是微任務(wù)（microtask）。它們的區(qū)別在于，正常任務(wù)追加到下一輪事件循環(huán)，微任務(wù)追加到本輪事件循環(huán)。這意味著，微任務(wù)的執(zhí)行時(shí)間一定早于正常任務(wù)。

setTimeout(function() {
  console.log(1);
}, 0);
new Promise(function (resolve, reject) {
  resolve(2);
}).then(console.log);
console.log(3);
// 3
// 2
// 1

上面代碼的輸出結(jié)果是321。這說明then的回調(diào)函數(shù)的執(zhí)行時(shí)間，早于setTimeout(fn, 0)。因?yàn)閠hen是本輪事件循環(huán)執(zhí)行，setTimeout(fn, 0)在下一輪事件循環(huán)開始時(shí)執(zhí)行。