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()捕獲所有同步和異步的錯誤。

posted @ 2018-11-11 20:39 nd 閱讀(3864) 評論(0) 收藏舉報

刷新頁面返回頂部

JavaScript中的Promise

公告