上一篇博客JavaScript動態加載script方式引用百度地圖API，Uncaught ReferenceError: BMap is not defined
這篇文章中我接觸到一個新的單詞：Promise，借此來記錄一下它，引用來源：JS - Promise使用詳解--摘抄筆記
因為現在還不會jquery，就只看了原生js部分的內容。
一、promises相關概念
promises 的概念是由 CommonJS 小組的成員在 Promises/A 規范中提出來的。
1，then()方法介紹
根據 Promise/A 規范，promise 是一個對象，只需要 then 這一個方法。then 方法帶有如下三個參數：
- 成功回調
- 失敗回調
- 前進回調（規范沒有要求包括前進回調的實現，但是很多都實現了）。
一個全新的 promise 對象從每個 then 的調用中返回。
2，Promise對象狀態
Promise 對象代表一個異步操作，其不受外界影響，有三種狀態：
- Pending（進行中、未完成的）
- Resolved（已完成，又稱 Fulfilled）
- Rejected（已失敗）。
（1）promise 從未完成的狀態開始，如果成功它將會是完成態，如果失敗將會是失敗態。
（2）當一個 promise 移動到完成態，所有注冊到它的成功回調將被調用，而且會將成功的結果值傳給它。另外，任何注冊到 promise 的成功回調，將會在它已經完成以后立即被調用。
（3）同樣的，當一個 promise 移動到失敗態的時候，它調用的是失敗回調而不是成功回調。
（4）對包含前進特性的實現來說，promise 在它離開未完成狀態以前的任何時刻，都可以更新它的 progress。當 progress 被更新，所有的前進回調(progress callbacks)會被傳遞以 progress 的值，並被立即調用。前進回調被以不同於成功和失敗回調的方式處理；如果你在一個 progress 更新已經發生以后注冊了一個前進回調，新的前進回調只會在它被注冊以后被已更新的 progress 調用。
（5）注意：只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。
3，Promise/A規范圖解
4，目前支持Promises/A規范的庫
- Q：可以在NodeJS 以及瀏覽器上工作，與jQuery兼容，可以通過消息傳遞遠程對象。
- RSVP.js：一個輕量級的庫，它提供了組織異步代碼的工具。
- when.js：體積小巧，使用方便。
- NodeJS的Promise
- jQuery 1.5：據說是基於“CommonJS Promises/A”規范
- WinJS / Windows 8 / Metro
二、使用promises的優勢
1，解決回調地獄（Callback Hell）問題
（1）有時我們要進行一些相互間有依賴關系的異步操作，比如有多個請求，后一個的請求需要上一次請求的返回結果。過去常規做法只能 callback 層層嵌套，但嵌套層數過多的話就會有 callback hell 問題。比如下面代碼，可讀性和維護性都很差的。
firstAsync(function(data){ //處理得到的 data 數據 //.... secondAsync(function(data2){ //處理得到的 data2 數據 //.... thirdAsync(function(data3){ //處理得到的 data3 數據 //.... }); }); });
（2）如果使用 promises 的話，代碼就會變得扁平且更可讀了。前面提到 then 返回了一個 promise，因此我們可以將 then 的調用不停地串連起來。其中 then 返回的 promise 裝載了由調用返回的值。
firstAsync() .then(function(data){ //處理得到的 data 數據 //.... return secondAsync(); }) .then(function(data2){ //處理得到的 data2 數據 //.... return thirdAsync(); }) .then(function(data3){ //處理得到的 data3 數據 //.... });
2，更好地進行錯誤捕獲
多重嵌套 callback 除了會造成上面講的代碼縮進問題，更可怕的是可能會造成無法捕獲異常或異常捕獲不可控。
（1）比如下面代碼我們使用 setTimeout 模擬異步操作，在其中拋出了個異常。但由於異步回調中，回調函數的執行棧與原函數分離開，導致外部無法抓住異常。
（2）如果使用 promises 的話，通過 reject 方法把 Promise 的狀態置為 rejected，這樣我們在 then 中就能捕捉到，然后執行“失敗”情況的回調。
當然我們在 catch 方法中處理 reject 回調也是可以的。
（1）比如下面代碼我們使用 setTimeout 模擬異步操作，在其中拋出了個異常。但由於異步回調中，回調函數的執行棧與原函數分離開，導致外部無法抓住異常。
function fetch(callback) { setTimeout(() => { throw Error('請求失敗') }, 2000) } try { fetch(() => { console.log('請求處理') // 永遠不會執行 }) } catch (error) { console.log('觸發異常', error) // 永遠不會執行 } // 程序崩潰 // Uncaught Error: 請求失敗
function fetch(callback) { return new Promise((resolve, reject) => { setTimeout(() => { reject('請求失敗'); }, 2000) }) } fetch() .then( function(data){ console.log('請求處理'); console.log(data); }, function(reason, data){ console.log('觸發異常'); console.log(reason); } );
function fetch(callback) { return new Promise((resolve, reject) => { setTimeout(() => { reject('請求失敗'); }, 2000) }) } fetch() .then( function(data){ console.log('請求處理'); console.log(data); } ) .catch(function(reason){ console.log('觸發異常'); console.log(reason); });
第二部分：
JS - Promise使用詳解2（ES6中的Promise）
2015年6月， ES2015（即 ECMAScript 6、ES6） 正式發布。其中 Promise 被列為正式規范，成為 ES6 中最重要的特性之一。
1，then()方法
簡單來講，then 方法就是把原來的回調寫法分離出來，在異步操作執行完后，用鏈式調用的方式執行回調函數。
而 Promise 的優勢就在於這個鏈式調用。我們可以在 then 方法中繼續寫 Promise 對象並返回，然后繼續調用 then 來進行回調操作。
（1）下面通過樣例作為演示，我們定義做飯、吃飯、洗碗（cook、eat、wash）這三個方法，它們是層層依賴的關系，下一步的的操作需要使用上一部操作的結果。（這里使用 setTimeout 模擬異步操作）
//做飯 function cook(){ console.log('開始做飯。'); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('做飯完畢！'); resolve('雞蛋炒飯'); }, 1000); }); return p; } //吃飯 function eat(data){ console.log('開始吃飯：' + data); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('吃飯完畢!'); resolve('一塊碗和一雙筷子'); }, 2000); }); return p; } function wash(data){ console.log('開始洗碗：' + data); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('洗碗完畢!'); resolve('干凈的碗筷'); }, 2000); }); return p; }
（2）使用 then 鏈式調用這三個方法：
cook() .then(function(data){ return eat(data); }) .then(function(data){ return wash(data); }) .then(function(data){ console.log(data); });
cook() .then(eat) .then(wash) .then(function(data){ console.log(data); });
（3）運行結果如下：
2，reject()方法
上面樣例我們通過 resolve 方法把 Promise 的狀態置為完成態（Resolved），這時 then 方法就能捕捉到變化，並執行“成功”情況的回調。
而 reject 方法就是把 Promise 的狀態置為已失敗（Rejected），這時 then 方法執行“失敗”情況的回調（then 方法的第二參數）。
（1）下面同樣使用一個樣例做演示
//做飯 function cook(){ console.log('開始做飯。'); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('做飯失敗！'); reject('燒焦的米飯'); }, 1000); }); return p; } //吃飯 function eat(data){ console.log('開始吃飯：' + data); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('吃飯完畢!'); resolve('一塊碗和一雙筷子'); }, 2000); }); return p; } cook() .then(eat, function(data){ console.log(data + '沒法吃!'); })
運行結果如下：
（2）如果我們只要處理失敗的情況可以使用 then(null, ...)，或是使用接下來要講的 catch 方法。
cook() .then(null, function(data){ console.log(data + '沒法吃!'); })
3，catch()方法
（1）它可以和 then 的第二個參數一樣，用來指定 reject 的回調
cook() .then(eat) .catch(function(data){ console.log(data + '沒法吃!'); });
//做飯 function cook(){ console.log('開始做飯。'); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('做飯完畢！'); resolve('雞蛋炒飯'); }, 1000); }); return p; } //吃飯 function eat(data){ console.log('開始吃飯：' + data); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('吃飯完畢!'); resolve('一塊碗和一雙筷子'); }, 2000); }); return p; } cook() .then(function(data){ throw new Error('米飯被打翻了！'); eat(data); }) .catch(function(data){ console.log(data); });
運行結果如下：
這種錯誤的捕獲是非常有用的，因為它能夠幫助我們在開發中識別代碼錯誤。比如，在一個 then() 方法內部的任意地方，我們做了一個 JSON.parse() 操作，如果 JSON 參數不合法那么它就會拋出一個同步錯誤。用回調的話該錯誤就會被吞噬掉，但是用 promises 我們可以輕松的在 catch() 方法里處理掉該錯誤。
（3）還可以添加多個 catch，實現更加精准的異常捕獲。
somePromise.then(function() { return a(); }).catch(TypeError, function(e) { //If a is defined, will end up here because //it is a type error to reference property of undefined }).catch(ReferenceError, function(e) { //Will end up here if a wasn't defined at all }).catch(function(e) { //Generic catch-the rest, error wasn't TypeError nor //ReferenceError });
4，all()方法
Promise 的 all 方法提供了並行執行異步操作的能力，並且在所有異步操作執行完后才執行回調。
（1）比如下面代碼，兩個個異步操作是並行執行的，等到它們都執行完后才會進到 then 里面。同時 all 會把所有異步操作的結果放進一個數組中傳給 then。
//切菜 function cutUp(){ console.log('開始切菜。'); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('切菜完畢！'); resolve('切好的菜'); }, 1000); }); return p; } //燒水 function boil(){ console.log('開始燒水。'); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('燒水完畢！'); resolve('燒好的水'); }, 1000); }); return p; } Promise .all([cutUp(), boil()]) .then(function(results){ console.log("准備工作完畢："); console.log(results); });
5，race()方法
race 按字面解釋，就是賽跑的意思。race 的用法與 all 一樣，只不過 all 是等所有異步操作都執行完畢后才執行 then 回調。而 race 的話只要有一個異步操作執行完畢，就立刻執行 then 回調。
注意：其它沒有執行完畢的異步操作仍然會繼續執行，而不是停止。
（1）這里我們將上面樣例的 all 改成 race
Promise .race([cutUp(), boil()]) .then(function(results){ console.log("准備工作完畢："); console.log(results); });
（2）race 使用場景很多。比如我們可以用 race 給某個異步請求設置超時時間，並且在超時后執行相應的操作。
//請求某個圖片資源 function requestImg(){ var p = new Promise(function(resolve, reject){ var img = new Image(); img.onload = function(){ resolve(img); } img.src = 'xxxxxx'; }); return p; } //延時函數，用於給請求計時 function timeout(){ var p = new Promise(function(resolve, reject){ setTimeout(function(){ reject('圖片請求超時'); }, 5000); }); return p; } Promise .race([requestImg(), timeout()]) .then(function(results){ console.log(results); }) .catch(function(reason){ console.log(reason); });
上面代碼 requestImg 函數異步請求一張圖片，timeout 函數是一個延時 5 秒的異步操作。我們將它們一起放在 race 中賽跑。
- 如果 5 秒內圖片請求成功那么便進入 then 方法，執行正常的流程。
- 如果 5 秒鍾圖片還未成功返回，那么則進入 catch，報“圖片請求超時”的信息。
