JavaScript中的Promise

1. promise定義

Promise是異步編程的一種解決方案，比傳統的解決方案（函數回調和事件）更合理，更強大。ES6中將Promise寫進了語言標準，統一了用法，提供原生的Promise對象。

Promise是一個容器，容器中保存着某個將來纔會結束的事件，一般是一個異步操做。從語法上看，Promise是一個對象，從它能夠獲取異步操做的消息。Promise提供統一的API，各類異步操做能夠用一樣的方法來處理。

Promise對象有如下兩個特色：
1. 對象狀態不受外界影響。Promise對象表明一個異步操做，有如下三個狀態：
  pending：進行中
  fulfilled：已成功
  reject： 已失敗
只有異步操做的結果，能夠決定當前是哪種狀態，任何其餘操做都沒法改變這個狀態。這也是Promise名字的由來，它意思是「一個承諾」，表示其餘手段沒法改變。
2. 一旦改變狀態，就不會再變，任什麼時候候均可以獲得這個結果。Promise對象的狀態改變，只能有兩種可能：從pending變成fulfilled和從pending變成rejected。只要這兩種狀況發生，狀態就凝固了，不會再變了，會一直保持這個結果，這時就稱爲resolved（已定型）。若是改變已經發生，再對Promise對象添加回調函數，也同樣會當即獲得這個結果。這和事件徹底不一樣，事件的特色是，若是錯過了它，再去監聽，是得不到任何結果的。

注意咱們這裏說resolved，後面若是沒有特別說明，都是指fulfilled狀態，不包含rejected狀態。

有了Promise對象，咱們就能夠將異步操做以同步操做的流程表達出來，從而避免層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操做更加容易。

Promise也有一些缺點。首先沒法取消Promise，一旦新建它就要當即執行，沒法中途取消。其次，若是不設置回調函數，Promise內部拋出的錯誤，不會反映到外部。第三，當處於pending狀態時，沒法得知目前進展到哪個狀態，是剛剛開始仍是即將完成。

2. 用法

在ES6中，Promise是一個構造函數，用來生成Promise實例。以下代碼：

     let promise = new Promise((resolve, reject) => {
         if (/** 異步操做成功 */) {
             resolve (value)
       } else {
             reject (error)
       }
     })

Promise構造函數接受一個函數做爲參數，這個函數的兩個參數分別是resolve和reject。resolve，reject是兩個函數，是JavaScript引擎提供的，不用本身部署。resolve函數的做用是，將Promise對象的狀態從pending改成resolved，在異步函數操做成功的時候調用給，並將異步操做的結果做爲參數傳遞出去。reject函數的做用是將Promise對象的狀態從pending改成rejected，在異步操做失敗的時候調用，並將異步操做報出的錯誤做爲參數傳遞出去。

Promise實例生成以後，能夠用then方法來分別指定resolved狀態和rejected狀態的回調函數，下面是一個簡單的例子：

    function timeout (ms) {
        return new Promise((resolve, reject) => {
            /*setTimeout方法能夠接受三個參數，第一個是要執行的代碼或者函數，第二個是毫秒數，後面全部的參數都是給第一個參數（函數）傳遞的參數*/
            setTimeout(resolve, ms, 'done')
        })
    };

    timeout(1000).then(value => {
        console.log(value);
    });

1. timeout方法返回一個Promise實例，表示一段時間後纔會發生的結果
2. 過了指定ms指定的時間後，Promise實例的狀態就會變爲resolved，而後觸發then方法指定的回調函數
3. then方法指定的回調函數中輸出setTimeout方法傳遞的第三個參數「done」

經過下面的代碼看看Promise對象的執行順序：

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

1. 實例化一個Promise對象，調用構造函數，首先執行console.log('Promise');輸出「Promise」，resolve()函數將Promise對象的狀態從pending改成resolved
2. 使用then方法指定resolved狀態回調函數
3. 輸出「Hi」
4. 當期腳本全部同步任務執行完成後，執行then方法指定的回調函數，輸出「resolved」

下面代碼是使用Promise包裝一個異步加載圖片的方法：

    function loadImageAsync (url) {
        return new Promise((resolve, reject) => {
            let image = new Image();
            console.log(image)
            image.onload = function () {
                resolve(image);
            };
            image.onerror = function () {
                reject(new Error('Could not load image at ' + url))
            };
            image.src = url;
        })
    }
    loadImageAsync('https://avatar.csdn.net/2/1/1/3_m0_37682004.jpg').then(image => {
        document.body.appendChild(image);
    });

1. 定義loadImageAsync方法，在方法內部返回Promise對象
2. Promise函數內先定義一個image對象，image加載成功的時候調用resolve函數，將狀態從pending改成resolved，加載失敗的時候將調用reject函數，將狀態從pending改成rejected。注意image對象有onload，onerror這兩個回調函數。
3. 設置image對象的url
4. 調用loadImageAsync方法並用then方法指定Promise對象狀態變爲resolved時的回調函數，將image對象放在當前頁面的body中

執行結果以下：

下面代碼是一個用Promise實現Ajax操做的例子。getJSON是針對XMLHttpRequest對象的封裝，用於發出一個針對JSON數據的HTTP請求，並返回一個Promise對象。注意在getJSON內部，resolve和rejecte函數調用時都帶有參數，這個參數會傳給then方法指定的函數。

     let getJSON = function (url) {
       let promise = new Promise((resolve, reject) => {
           let client = new XMLHttpRequest();
           client.open('GET', url);
           client.onreadystatechange = handler;
           client.responseType = 'json';
           client.setRequestHeader('Accpt', '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(json => {
         console.log(json);
     }, error => {
          console.log(`出錯了`, error);
     }) 

若是調用resolve函數和reject函數時帶有參數，那麼他們的參數會傳遞給回調函數。reject函數的參數一般是一個Error對象實例，表示拋出的錯誤。resolve函數的參數除了正常的值，還有多是另一個Promise實例，以下：

     let p1 = new Promise(function (resolve, reject) {

     });
     let p2 = new Promise(function (resolve, reject) {
       resolve(p1)
     }) 

上面代碼中，p1和p2都是Promise的實例，p2的resolve方法將p1做爲參數，即一個異步操做的返回結果是另一個異步操做。注意這是p1的狀態會傳遞給p2，就是說p1的狀態決定了p2的狀態。若是p1的狀態是pending，那麼p2的回調函數就會等待p1的狀態改變；若是p1的狀態已是resolved，那麼p2的回調函數就會等待p1的狀態改變；若是p1的狀態是resolved或者rejected，那麼p2的回調函數將會當即執行。

    var p1 = new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error('fail')), 3000)
    });
    var p2 = new Promise((resolve, reject) => {
        setTimeout(() => resolve(p1), 1000);
    });
    p2.then(result => console.log(result)).catch(error => console.log(error)); 

1. 定義Promise對象p1，3秒鐘以後修改p1的狀態爲rejected
2. 定義Promise對象p2，1秒鐘以後修改p2的狀態爲resolved，執行resolve函數的時候傳遞參數是對象p1，p1也是一個Promise對象，致使p2本身的狀態無效，p2的狀態由p1決定，這樣p2回調函數再也不有效，then方法指定resolve函數再也不執行，而是執行p1的reject方法
3. 執行p2的then方法，p2的resolve方法不執行，3秒鐘後捕捉到p1的Error，觸發catch方法指定的回調函數，輸出fail

調用resolve或者reject並不會終結Promise的參數函數的執行，以下代碼：

     new Promise((resolve, reject) => {
         resolve(1);
         console.log(2);
     }).then(r => {
       console.log(r);
     }); 

執行結果以下：

1. 定義Promise對象，先把promise對象的狀態修改成resolve，輸出2，因爲resolved的Promise是在本輪事件循環的末尾執行，老是晚於本輪循環的同步任務，所以先輸出2
2. 使用then方法指定Promise對象的的resolve方法輸出1

3.Promise.prototype.then()

Promise實例有then方法，then方法定義在原型對象Promise.prototype上。它的做用是爲Promise實例添加狀態改變時的回調函數。then方法的第一個參數是resolved狀態的回調函數，第二個參數是可選的，是rejected狀態的回調函數。

then方法返回的是一個新的Promise實例，這個實例不是原來的那個Promise實例，所以可使用鏈式寫法，即then方法後面再調用另一個then方法。

    let getJson = function (url) {
        let promise = new Promise((resolve, reject) => {
            let client = new XMLHttpRequest();
            client.open('GET', url);
            client.onreadystatechange = handler;
            client.responseType = 'json';
            client.setRequestHeader('Accpt', '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 (post) {
        return getJson(post.commentURL);
    }).then(function funcA (comments) {
        console.log("Resolved: ", comments);
    }, function funcB (err) {
        console.log("Rejected: ", err);
    }); 

上面代碼中用的posts.json文件內容以下：

{
  "commentURL": "posts.json"
} 

輸出結果以下：

 

代碼分析以下：
1.  定義getJson方法
2.  調用getJson方法，resolve回調函數中又調用getJson方法（傳遞的參數是posts.json中的commentURL屬性值），並返回這個Promise對象
3. 第二個then方法中會等待第一個then方法返回的Promise對象狀態變化，若是變爲resolved就調用funcA，若是狀態變爲rejected，就調用funcB

上面的代碼可使用箭頭函數，這樣看起來更簡潔，以下：

    getJson('posts.json').then(
        post => getJson(post.commentURL)
    ).then(
        comments => console.log('resolved', comments),
        err => console.log('rejected', err)
    ); 

注意：
1. 箭頭函數表達式筆函數表達式更加簡潔，沒有本身的this，arguments，auper，經常使用來那些原本須要匿名函數的地方，而且不能用做構造函數。
2. (參數1, 參數2, …, 參數N) => 表達式（單一）至關於 (參數1, 參數2, …, 參數N) =>{ return 表達式; }

4. Promise.property.catch()

Promise.property.catch()方法是Promise.property.then(null, rejection)的別名，用於指定Promise對象從pending變成reject時的回調函數。

    getJson('posts.json').then(function (posts) {
        
    }).catch(error => {
        console.log('發生了錯誤', error)
    }) 

上面代碼中給，getJson方法返回的是一個Promise對象，若是該對象狀態改變爲resolved，則會調用then方法指定的回調函數；若是拋出錯誤，狀態會變爲rejected，就會調用catch方法指定的回調函數。另外then指定的回調函數中拋出錯誤，也會被catch捕獲。看下面的代碼：

    var p = new Promise((resolve, reject) => {
        if (true) {
            resolve('fufilled')
        } else {
            reject()
        }
    });
    p.then(val => console.log('fulfilled:', val))
        .then(null, err => console.log('rejected:', err))
    // 等同於
    p.then(val => console.log('fulfilled:', val))
        .catch(err => console.log('rejected', err));

 輸出結果以下：

上面代碼中，promise拋出一個錯誤，就被catch方法指定的回調函數捕獲。注意着兩種寫法是等價的。再看下面兩種寫法

    const promise1 = new Promise((resolve, reject) => {
            try {
                throw new Error('test');
            } catch (e) {
                reject(e)
            }
        });
    promise1.catch(error => {
        console.log(error);
    });
    const promise2 = new Promise((resolve, reject) => {
        reject(new Error('text'));
    })
    promise2.catch(error => console.log(error));

 輸出結果以下：

1. 定義Promise對象promise1，拋出Error，在catch語句中將當前對象狀態從pending修改成rejected，並傳遞錯誤對象
2. 執行catch方法，輸出錯誤對象
3. 定義Promise對象promise1，直接將當前狀態從pending修改成rejected並將錯誤對象做爲參數傳遞
4. 執行catch方法，輸出錯誤對象
比較上面兩種寫法，能夠說reject方法的做用等同於冒出錯誤。

若是Promise狀態已經修改成resolved，則再拋出錯誤是無效的，看下面代碼：

    const promise = new Promise((resolve, reject) => {
            resolve('ok')
            throw new Error('test')
        })
    promise.then(value => console.log(value))
        .catch(error => console.log(error))

 輸出結果以下：

1. 定義Promise對象，在方法中先調用resolve方法將狀態從pending修改成resolved，並傳遞參數「ok」，再拋出錯誤。注意拋出錯誤的語句寫在resolve後面，不會被捕獲，等於沒有拋出。由於Promise的狀態一旦改變就永遠不會再變了。
2. 在then方法中，添加狀態變爲resolved的回調方法，輸出參數值「ok」
3. 在catch方法中，添加狀態變爲rejected的回調方法，輸出錯誤。定義Promise對象的方法中沒有調用reject方法，這裏不會被調用

那若是在定義Promise對象的方法中既沒有調用resolve方法，也沒有調用reject方法，只拋出錯誤會怎麼樣呢？ 看看下面的代碼：

    const promise = new Promise((resolve, reject) => {
            throw new Error('test')
        })
    promise.catch(error => console.log(error))
    // 等同於
    promise.then(null, error => console.log(error)) 

結果以下：

看來不只僅是reject方法會把狀態修改成rejected，拋出錯誤也能夠。

Promise對象的錯誤具備冒泡性質，會一直向後傳遞，知道捕獲爲止，就是說，錯誤會被下一個catch語句捕獲。

getJson('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 處理前面三個Promise產生的錯誤
});

上面代碼中，一共有三個Promise對象，一個由getJson產生，兩個由then產生。它們之中任何一個拋出錯誤，都會被最後一個catch捕獲。

通常來講，不要在then方法中定義Reject狀態的回調函數，即then方法的第二個參數，老是使用catch方法

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  }); 

上面代碼中，第二種寫法要好於第一種，理由是第二種寫法能夠捕獲前面then方法執行中的錯誤，也更接近於同步的寫法（try/catch）。所以，建議老是使用catch方法，而不是使用then方法的第二個參數。

和傳統的try/catch代碼塊不一樣的是，若是沒有使用catch方法指定錯誤處理的回調函數，Promise對象拋出的錯誤不會傳遞到外層代碼，即不會有任何反應。看下面的代碼：

    const someAsyncThing = function() {
            return new Promise(function(resolve, reject) {
                // 下面一行會報錯，由於x沒有聲明
                resolve(x + 2);
            });
        };

    someAsyncThing().then(function() {
        console.log('everything is great');
    });

    setTimeout(() => { console.log(123) }, 2000); 

輸出結果以下：

1. 定義someAsyncThing方法，返回一個Promise對象
2. 調用resolve方法，傳遞參數中報錯，瀏覽器執行到這裏會報錯並打印錯誤提示：Uncaught (in promise) ReferenceError: x is not defined，可是不會退出進程，最終腳本中止執行
3. 使用then方法定義resolved狀態回調函數，輸出「everything is great」
4. 3秒鐘以後輸出：123，Promise內部的錯誤不會影響到後面代碼的執行，通俗的說是Promise會吃掉錯誤

雖然Promise對象方法中調用的是resolve方法，可是報錯的代碼會將Promise對象的狀態從pending修改成rejected，then方法中定義的resolve回調函數不會執行。看下面的代碼：

    const someAsyncThing = function() {
            return new Promise(function(resolve, reject) {
                // 下面一行會報錯，由於x沒有聲明
                resolve(x + 2);
            });
        };

    someAsyncThing().then(function() {
        console.log('everything is great');
    }).catch(e => console.log(e));

    setTimeout(() => { console.log(123) }, 2000);

輸出結果以下：

從輸出結果咱們看到，catch方法定義的語句輸出了錯誤內容，這個時候就不是紅色的字體了，而是正常的console.log()輸出。

把上面代碼放在服務器執行，退出碼就是0，表示執行成功 。不過Node有一個unhnadledRejection事件，專門監聽未捕獲的reject錯誤，上面的腳本就會觸發這個事件監聽函數，能夠在監聽函數中拋出錯誤。

process.on('unhandledRejection', function (err, p) {
  throw err;
}); 

上面代碼中，unhandledRejection事件的監聽函數有兩個參數，第一個是錯誤對象，第二個是報錯的Promise實例，它能夠用來了解錯誤的環境信息。

注意，Node有計劃在將來廢除這個unhandledRejection事件。若是Promise內部有未捕獲的錯誤，會直接終止進程，而且進程的退出碼不會0

    const promise = new Promise((resolve, reject) => {
        resolve('ok');
        setTimeout(() => { throw new Error('test') }, 0)
        })
    promise.then(value => { console.log(value) })

結果以下：

上面代碼中，Promise指定在下一輪「事件循環」再拋出錯誤。到那個時候，Promise的運行狀態已經結束了，因此這個錯誤是在Promise函數體外拋出的，會冒泡到最外層，成了未捕獲的錯誤。

再看下面的代碼：

    const promise = new Promise((resolve, reject) => {
            resolve('ok')
            console.log('test')
            throw new Error('test')
        })
    promise.then(value => {
        console.log(value)
    }).catch(e => console.log(e))

輸出結果以下：

上面代碼中調用resolve方法以後，先輸出「test」，再拋出錯誤，可是會被忽略掉。

看下面代碼：

    const promise = new Promise((resolve, reject) => {
            resolve('ok')
            throw new Error('test')
            console.log('test')
        })
    promise.then(value => {
        console.log(value)
    }).catch(e => console.log(e))

輸出結果以下：

上面代碼中調用resolve方法以後，先拋出錯誤，以後程序就再也不往下執行了，後面的console.log('test')不會執行

通常老是建議，Promise對象後面要跟catch方法，這樣能夠處理Promise的內部發生的錯誤。catch方法返回的仍是一個Promise對象，所以後面還能夠調用then方法。看下面代碼：

    const someAsyncThing = function () {
            return new Promise((resolve, reject) => {
                resolve(x + 2)
            })
        }
    someAsyncThing().catch(error => console.log('oh on', error))
        .then(() => console.log('carry on'))

執行結果以下：

上面代碼運行完catch方法指定的回調函數以後，會接着執行後面的then方法指定的回調函數，若是沒有報錯，會跳過then方法。這說明這裏catch返回的promise的狀態是resolved，不是rejected

看下面的代碼：

    Promise.resolve()
        .catch(error => console.log('oh no', error))
        .then(() => console.log('carry on'))

執行結果以下：

上面代碼由於代碼沒有報錯，跳過了catch方法，直接執行後面的then方法。此時，要是then方法裏面報錯了，就和前面的catch無關了。

catch方法中還能再次拋出錯誤，以下代碼：

    const someAsyncThing = function () {
            return new Promise((resolve, reject) => {
                resolve(x + 2)
            })
        }
    someAsyncThing().then(() => someAsyncThing())
        .catch(error => {
            console.log('oh no', error)
            // 下面語句報錯，y是沒有定義的
            y + 2
        }).then(() => {
        console.log('carry on');
    })

輸出結果以下：

上面代碼中，catch方法拋出一個錯誤，由於後面沒有別的catch方法了，致使這個錯誤不會被捕獲，也捕獲傳遞到外城。下面改寫一下：

    const someAsyncThing = function () {
            return new Promise(function (resolve, reject) {
                // 下面一行會報錯，由於x沒有聲明
                resolve(x + 2);
            });
        };
    someAsyncThing().then(function () {
        return someOtherAsyncThing();
    }).catch(function (error) {
        console.log('oh no', error);
        // 下面一行會報錯，由於y沒有聲明
        y + 2;
    }).catch(function (error) {
        console.log('carry on', error);
    });

輸出結果以下：

上面代碼中，第二個catch方法用來捕獲第一個catch方法拋出的錯誤。

5. Promise.property.finally()

finally方法用於指定無論Promise對象最後狀態如何，都會被執行的操做。這個方法是ES2018引入標準的。

    Promise.resolve('resolve')
        .then(result => console.log(result))
        .catch(e => console.log(e))
        .finally(() => console.log('finally')) 

上面代碼中，無論promise最後的狀態，在執行完then以後或者catch指定的回調函數之後，都會執行finally方法指定的回調函數。

finally方法的回調函數不接受任何參數，這意味着沒有辦法知道，前面的Promise對象的狀態究竟是fulfilled仍是rejected。這代表，finally方法裏的操做是和狀態無關的，不依賴於Promise的執行結果。

finally方法本質上是then方法的特例

promise
.finally(() => {
  // 語句
});

// 等同於
promise
.then(
  result => {
    // 語句
    return result;
  },
  error => {
    // 語句
    throw error;
  }
);

上面代碼中，若是聲明finally方法，一樣的語句須要爲成功和失敗兩種狀況各寫一次。有了finally方法，則只須要寫一次。

它的實現也很簡單。

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

從上面代碼能夠看到，無論前面Promise是fulfilled仍是rejected，都會執行回調函數callback。

finally方法老是返回原來的值。

6. Promise.all()

Promise.all()方法用於將多個Promise實例，包裝成一個新的Promise實例。const p = Promise.all([p1, p2, p3])，Promise.all方法接受一個數組做爲參數，p1，p2，p3都是Promise的實例，若是不是，就會先調用下面講到的Promise.resolve()方法，將參數轉爲Promise實例，再進一步處理。Promise.all方法的參數能夠不是數組，可是必須有Iterator接口，且返回的每一個成員都是Promise實例。

（1）只有p1，p2，p3的狀態都變成fulfilled，p的狀態纔會變成fulfilled，此時p1，p2，p3的返回值組成一個數組，傳遞給p的回調函數

（2）只要p1，p2，p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被rejected的實例的返回值，會傳遞給 p的回調函數。注意其餘的對象徹底被忽略掉。

下面是一個例子

// 生成一個Promise對象的數組
const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
  return getJSON('/post/' + id + ".json");
});

Promise.all(promises).then(function (posts) {
  // ...
}).catch(function(reason){
  // ...
});

上面代碼中，promise是包含6個Promise實例的數組，只有這6個實例的狀態都變成fulfilled，或者其中一個變成rejected，纔會調用Promise.all方法後面的回調函數。

下面是另外一個例子：

const databasePromise = connectDatabase();

const booksPromise = databasePromise
  .then(findAllBooks);

const userPromise = databasePromise
  .then(getCurrentUser);

Promise.all([
  booksPromise,
  userPromise
])
.then(([books, user]) => pickTopRecommentations(books, user)); 

上面代碼中，booksPromise和userPromise是兩個異步操做，只有等到他們的結果都返回了，纔會觸發pickTopRecommentation這個回調函數。

注意，若是做爲參數的Promise實例，本身定義了catch方法，那麼它一旦被rejected，並不會觸發Promise.all()的catch方法。

    const p1 = new Promise((resolve, reject) => {
        resolve('hello');
    }).then(result => result)
        .catch(e => e);


    const p2 = new Promise((resolve, reject) => {
        throw new Error('報錯了');
    }).then(result => result)
        .catch(e => e);


    Promise.all([p1, p2])
        .then(result => console.log(result))
        .catch(e => console.log(e)); 

執行結果以下：

1. 定義Promise對象p1，修改狀態爲resolved，向回調函數傳遞參數「hello」，then方法指定的回調函數中返回這個參數，catch方法定義的回調函數中返回異常
2. 定義Promise對象p2，拋出異常「報錯了」，then方法指定的回調函數中返回輸入參數，catch方法指定的回調函數返回當前異常
3. 使用Promise.all方法將p1，p2包裝成一個新的Promise對象，p1先resolved，p2先rejected，可是p2有本身的catch方法，catch方法返回新的Promise實例，p2指向的其實是這個實例。該實例執行完catch方法後，也會變成resolved，致使Promise.all方法參數裏面兩個實例都會resolved，所以會調用then方法中指定的回調函數，而不會調用catch方法指定的回調函數。
4.最後輸出了p1，p2的結果，結果也是一個數組，第一個是「hello」，第二個是p2拋出的錯誤。

若是p2沒有本身的catch方法，就會調用Promise.all的catch方法，並將Error傳遞給p的回調函數。看下面代碼：

    const p1 = new Promise((resolve, reject) => {
        resolve('hello');
    }).then(result => result)


    const p2 = new Promise((resolve, reject) => {
        throw new Error('報錯了');
    }).then(result => result)


    Promise.all([p1, p2])
        .then(result => console.log(result))
        .catch(e => console.log(e));

輸出結果以下：

上面代碼中，Promise對象p2中冒出異常，狀態從pending修改成rejected，此時第一個被rejected的實例的返回值Error傳遞給p的catch方法指定的回調函數，輸出這個Error，而p1徹底被忽略掉，兩個對象p1，p2和一個對象p2的效果是同樣的。

7.Promise.race()

Promise.race()方法一樣是將多個Promise對象實例，包裝成一個新的Promise實例。const p = Promise.race([p1, p2, p3]); 這句代碼中p1，p2，p3只要有一個實例率先改變狀態，p的狀態就跟着改變，那個率先改變的Promise實例的返回值，就傳遞給p的回調函數。

Promise.race()方法的參數和Promise.all()方法徹底同樣，若是不是Promise實例，就會先調用下面介紹的Promise.resolve方法，將參數轉爲Promise實例，進一步處理。

下面是一個例子，若是指定事件內沒有得到結果，就將Promise的狀態改變爲rejected，不然轉變爲resolved。

    const p = Promise.race([
        fetch('/resource-that-may-take-a-while'),
        new Promise(function (resolve, reject) {
            setTimeout(() => reject(new Error('request timeout')), 5000)
        })
    ]);

    p.then(console.log)
        .catch(console.error);

 

上面代碼中，若是5秒內fetch方法沒有返回結果，變量p的狀態就變成了rejected從而觸發catch方法指定的回調函數。這個和ajax方法中的timeout參數效果相似。

8.Promise.resolve()

有時候須要將現有對象轉換成Promise對象，Promise.resolve()方法就起到這個做用。const jsPromise = Promise.resolve($.ajax('/posts.json')); 這一句代碼將jQuery生成的deferred對象，轉爲一個新的Promise對象。Promise.resolve()方法等同於new Promise(resolve => resolve('foo'))，接受一個參數，實例化一個Promise對象。

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

（1）參數是一個Promise實例
若是參數是Promise實例，那麼Promise.resolve將不作任何修改，原封不動的返回這個實例
（2）參數是一個thenable對象
thien對象是指具備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);
    console.log(p1);
    p1.then(function (value) {
        console.log(value);
        console.log(p1)
    });
    console.log(p1);

執行結果以下：

上面代碼中，thenable對象的then方法執行後，對象p1的狀態就變爲resolved，從而當即執行最後那個then方法指定的回調函數，輸出42
（3）參數不是thenable對象，或根本不是對象
若是參數是一個原始值，或者是一個不具備then方法的對象，則Promise.resolve方法返回一個新的Promise對象，狀態爲resolved。

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

執行的結果以下：

上面代碼生成一個新的Promise對象的實例p。因爲字符串Hello不屬於異步操做（判斷字符串是否具備then方法），返回Promise實例的狀態從實例化開始就是resolved，因此回調函數就當即執行。Promise.resolve方法的參數，會同時傳給回調函數。
（4）不帶任何參數
Promise.resolve方法容許不帶任何參數，直接返回一個resolved狀態的Promise對象。因此若是但願獲得一個Promise對象，比較方便的方法就是直接調用Promise.resolve方法。

    setTimeout(function () {
        console.log('three');
    }, 0);
    Promise.resolve().then(function () {
        console.log('two');
    });
    console.log('one');

輸出結果以下：

須要注意的是，當即resolve的Promise對象，是在本輪「事件循環」 （event loop）結束時，而不是在下一輪「事件循環」的開始時。上面代碼中setTimeOut(fn, 0)在下一輪「事件循環」開始時執行，Promise.resolve()在本輪「事件循環」結束時執行，console.log('one')則是當即執行。

9.Promise.reject()

Promise.reject()方法也返回一個新的Promise實例，改實例的狀態爲rejected。

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

 輸出結果爲：

上面代碼生成了一個Promise對象實例p狀態爲rejected，回調函數會當即執行。注意Promise.reject()方法的的參數，會原封不動地做爲reject的理由，變成後續方法的參數。這一點與Promise.resolve方法不一致。

    const thenable = {
        then(resolve, reject) {
            reject('出錯了');
        }
    };
    Promise.reject(thenable)
    .catch(e => {
        console.log(e === thenable)
    }) 

代碼輸出結果爲：

 

上面代碼中，Promise.reject方法的參數是一個thenable對象，執行之後，後面的catch方法的參數不是reject熬出的「出錯了」 這個字符串，而是thenable對象。

11. Promise.try()

實際開發過程當中，常常遇到一種狀況，不知道或者不想區分，函數f是同步函數仍是異步操做，可是想用Promise來處理它。由於這樣能夠無論f是否包含異步操做，都用thenable方法指定下一步流程，用catch方法處理f拋出的錯誤，通常會採用Promise.resolve().then(f);這種方法。

這種寫法有一個缺點，就是若是f是同步函數，那麼它會在本輪事件循環的末尾執行。

    const f = () => console.log('now');
    Promise.resolve().then(f);
    console.log('next');

 輸出結果以下：

1. 定義函數f，輸出「now」
2. 使用Promise.resolve()方法包裝函數f，在then方法中調用f，f在本輪事件循環的末尾執行
3. 直接輸出「next」

有沒有辦法讓異步函數異步執行，同步函數同步執行，而且使用同一的API呢？可使用async方法，代碼以下：

    const f = () => console.log('now');
    (async () => f())();
    console.log("next");

 執行結果以下：

上面代碼中，第二行是一個當即執行的匿名函數，會當即執行裏面的async函數，所以若是f是同步的，就會獲得同步的結果；若是f是異步的，就能夠用then指定下一步。就像下面的寫法：

(async () => f())()
.then(...) 

須要注意的是，async() => f()會吃掉f()跑出的錯誤。因此若是想捕獲錯誤，就要使用promise.catch方法

(async () => f())()
.then(...)
.catch(...) 

第二種寫法是使用new Promise() 

const f = () => console.log('now');
(
  () => new Promise(
    resolve => resolve(f())
  )
)();
console.log('next'); 

 輸出結果以下：

下面的代碼也是使用當即執行的的匿名函數，因此如今有一提案，提供Promise.try代替上面的寫法。

    const f = () => console.log('now');
    Promise.try(f);
    console.log('next'); 

因爲Promise.try爲全部操做提供同一的處理機制，因此若是想用then方法管理劉晨個，最好是使用Promise.try包裝一下，這樣能夠更好的處理異常。

function getUsername(userId) {
  return database.users.get({id: userId})
  .then(function(user) {
    return user.name;
  });
} 

上面代碼中，database.user.get()返回一個Promise對象，若是跑出異常錯誤，可使用catch方法捕獲，以下：

database.users.get({id: userId})
.then(...)
.catch(...) 

可是database.users.get()可能還會拋出同步錯誤（好比數據庫鏈接錯誤，具體要看實現的方法），這時就不得不使用try...catch捕獲。

try {
  database.users.get({id: userId})
  .then(...)
  .catch(...)
} catch (e) {
  // ...
} 

上面的寫法很笨拙，這時就能夠統一用promise.catch()捕獲全部同步和異步的錯誤。