ES6 Promise

mengbo 發(fā)布于2019-08-23 18:40 / 862人閱讀

摘要：可以捕獲返回值返回一個(gè)，處理狀態(tài)變?yōu)榈那闆r參數(shù)是一個(gè)函數(shù)，有一個(gè)參數(shù)，用來(lái)記錄變成狀態(tài)返回的原因。示例用于將現(xiàn)有對(duì)象轉(zhuǎn)為對(duì)象等價(jià)于返回值返回一個(gè)對(duì)象，這個(gè)對(duì)象是被給定的值解析過(guò)的。

參考
https://pouchdb.com/2015/05/1...
https://developer.mozilla.org...
http://es6.ruanyifeng.com/#do...

Promises

是一種編寫異步代碼的方法。

Promise 對(duì)象

用于表示一個(gè)異步操作的最終狀態(tài)（完成或失?。?，以及該異步操作的結(jié)果值。

Promise 使用

Promise適用于這樣的場(chǎng)景，后面的操作必須根據(jù)前面的操作的結(jié)果做出相應(yīng)的反應(yīng)。 那么后面的操作必須等前面的操作完成并且獲得前面操作的結(jié)果。

假設(shè)我們現(xiàn)在有三個(gè)操作doSomethingFirst，doSomethingSecond 和finalHandler。
doSomethingSecond 需要根據(jù) doSomethingFirst 的結(jié)果做出反應(yīng)
finalHandler 需要根據(jù) doSomethingSecond 的結(jié)果做出反應(yīng)
流程如下：

//resOfDoSomethingFirst 是 DoSomethingFirst的結(jié)果
  doSomethingFirst
|-----------------|
                  doSomethingSecond(resOfDoSomethingFirst)
                  |------------------|
                                     finalHandler(doSomethingSecond的結(jié)果)
                                     |------------------|
實(shí)現(xiàn)這個(gè)場(chǎng)景需要解決以下兩個(gè)問(wèn)題：
    后面的操作 如何知道 前面的操作 完成了
    后面的操作 如何知道 前面的操作 的執(zhí)行結(jié)果是什么

//包裝第一個(gè)操作在 doSomethingFirst 中
const doSomethingFirst = new Promise(function(resolve, reject) {
  // ... some code

  if (/*操作成功 */){
    resolve(doSomethingFirstValue);     //將doSomethingFirst對(duì)象的狀態(tài)從“pending”變?yōu)椤皉esolved”
  } else {
    reject(doSomethingFirstError);
  }
});

//包裝第二個(gè)操作在 
doSdoSomethingSecond(resOfDoSomethingFirst) {
      // ... some code
    return somePromise(); //返回一個(gè)promise 對(duì)象
});

//整個(gè)操作流程如下：
doSomethingFirst()
    .then(doSdoSomethingSecond)
    .then(finalHandler)
    .catch(function (err) {
      console.log(err);
    })
    .finally(() => {···});
    
通過(guò)new Promise創(chuàng)建的Promise 實(shí)例doSomethingFirst 有以下方法：
    Promise.all(iterable)
    Promise.race(iterable)
    Promise.reject(reason)
    Promise.resolve(value)
    Promise.prototype.catch(onRejected)
    Promise.prototype.then(onFulfilled, onRejected)
    Promise.prototype.finally(onFinally)

1. doSomethingSecond 如何知道 doSomethingFirst 操作完成了
    通過(guò)doSomethingFirst狀態(tài)的變更通知。

    一個(gè) Promise有以下幾種狀態(tài):
        pending: 操作未完成。
        fulfilled: 操作完成，并且成功。
        rejected: 操作完成，但是失敗。

    resolve()函數(shù)：
        在異步操作成功時(shí)調(diào)用
        作用是：將Promise對(duì)象的狀態(tài)從 pending 變?yōu)?fulfilled，并將異步操作的結(jié)果，作為參數(shù)傳遞出去；
    reject()函數(shù)：
        在異步操作失敗時(shí)調(diào)用
        作用是：將Promise對(duì)象的狀態(tài)從 pending 變?yōu)?rejected， 并將異步操作的錯(cuò)誤，作為參數(shù)傳遞出去。

    當(dāng)操作完成時(shí)(Promise對(duì)象的狀態(tài)變?yōu)閒ulfilled 或 rejected時(shí))，doSomethingFirst 就會(huì)通過(guò)then()函數(shù)調(diào)用doSomethingSecond，doSomethingSecond就知道doSomethingFirst已經(jīng)完成了。
2. doSomethingSecond 如何知道 doSomethingFirst 的執(zhí)行結(jié)果是什么
    doSomethingFirst通過(guò)給then()函數(shù)調(diào)用doSomethingSecond(resOfDoSomethingFirst)并把執(zhí)行結(jié)果resOfDoSomethingFirst作為參數(shù)傳遞給doSomethingSecond

Promise.prototype.then(onFulfilled, onRejected)

用于為 Promise 實(shí)例添加狀態(tài)改變時(shí)的回調(diào)函數(shù)
返回值：一個(gè)新的 Promise，所可以采用鏈?zhǔn)綄懛ǎ瑃hen()函數(shù)后面再調(diào)用then()函數(shù)
參數(shù)：
    onFulfilled 
        是一個(gè)函數(shù)，有一個(gè)參數(shù)，用來(lái)記錄變成fulfilled狀態(tài)返回的結(jié)果
        當(dāng)doSomethingFirst這個(gè)Promise的狀態(tài)變成fulfilled 時(shí)，onFulfilled作為回調(diào)函數(shù)被調(diào)用
    onRejected
        是一個(gè)函數(shù)，有一個(gè)參數(shù)，用來(lái)記錄變成rejected狀態(tài)返回的原因
        當(dāng)doSomethingFirst這個(gè)Promise的狀態(tài)變成rejected 時(shí)，onRejected作為回調(diào)函數(shù)被調(diào)用

    在當(dāng)前的例子里參數(shù)onFulfilled就是doSomethingSecond(resOfDoSomethingFirst)，resOfDoSomethingFirst 記錄了doSomethingFirst 變成fulfilled狀態(tài)返回的結(jié)果。

注意事項(xiàng)：
    當(dāng)給then()傳入的參數(shù)不是函數(shù)時(shí)，它實(shí)際上將其解釋為then（null），將使先前的Promise的結(jié)果落空
        Promise.resolve("foo").then(Promise.resolve("bar")).then(function (result) {
          console.log(result); // foo
        });    
            等價(jià)于
        Promise.resolve("foo").then(null).then(function (result) {
            console.log(result);// foo 
        });
    
        上面的代碼并沒(méi)有按照我們期望的打印"bar", 而是打印"foo"
        正確的寫法是：
        Promise.resolve("foo").then(function () {
          return Promise.resolve("bar");
        }).then(function (result) {
          console.log(result); // bar
        });


給then()傳入的參數(shù)是函數(shù)時(shí)，函數(shù)的內(nèi)部我們可以做以下三件事：
    1. 返回另外一個(gè)promise
    2. 返回一個(gè)同步值
    3. 拋出一個(gè)同步錯(cuò)誤

    示例：返回另外一個(gè)promise
        doSomethingFirst()
            .then(doSdoSomethingSecond)
            .then(finalHandler)
    
        //somePromise() 返回promise對(duì)象
        function doSomethingSecond(resOfDoSomethingFirst) {
            return somePromise(); //有return， finalHandler接受到的是resOfDoSomethingSecond
            //somePromise();// 沒(méi)有return， finalHandler接受到的是undefined
        }
        function finalHandler(resOfDoSomethingSecond) {
            // handle resOfDoSomethingSecond
        }

    示例：返回同步值 && 拋出一個(gè)同步錯(cuò)誤
        返回同步值實(shí)際上是將同步代碼轉(zhuǎn)換為Promisey代碼的一種很棒的方法。例如，假設(shè)我們有一個(gè)用戶的內(nèi)存緩存。我們可以做到：
        
            //getUserByName  和 getUserAccountById 都返回promise對(duì)象
            getUserByName("nolan").then(function (user) {
              if (user.isLoggedOut()) { //如果用戶注銷
                throw new Error("user logged out!"); // 拋出一個(gè)同步錯(cuò)誤
              }
              if (inMemoryCache[user.id]) {
                return inMemoryCache[user.id];       //  返回一個(gè)同步值!
              }
              return getUserAccountById(user.id);    // 返回一個(gè)promise!
            }).then(function (userAccount) {
              // I got a user account!
            }).catch(function (err) {
              // Boo, I got an error!
            });
            
        如果用戶注銷，catch()將收到一個(gè)同步錯(cuò)誤；通過(guò)callbacks，這個(gè)錯(cuò)誤會(huì)被忽略
        如果任何promise被拒絕，catch()將收到一個(gè)異步錯(cuò)誤。

通常情況下，一個(gè)promise 依賴于另一個(gè)promise ，但當(dāng)我們需要兩個(gè)promises的輸出。我們?cè)撛趺醋?    getUserByName("nolan").then(function (user) {
      return getUserAccountById(user.id);
    }).then(function (userAccount) {
      // 在這里我們已經(jīng)獲取到了用戶賬號(hào)userAccount，
      // 但是我們也需要user對(duì)象時(shí)該怎么做？
    });    

    解決方案：
    function onGetUserAndUserAccount(user, userAccount) {
      return doSomething(user, userAccount);
    }
    
    function onGetUser(user) {
      return getUserAccountById(user.id).then(function (userAccount) {
        return onGetUserAndUserAccount(user, userAccount);
      });
    }
    
    getUserByName("nolan")
      .then(onGetUser)
      .then(function () {
      // at this point, doSomething() is done, and we are back to indentation 0
    });

Promise.prototype.catch(onRejected)

用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)。catch 可以捕獲
返回值：返回一個(gè)Promise，處理狀態(tài)變?yōu)閞ejected的情況
參數(shù)：
    onRejected
        是一個(gè)函數(shù)，有一個(gè)參數(shù)，用來(lái)記錄變成rejected狀態(tài)返回的原因。
        當(dāng)promise 狀態(tài)變?yōu)閞ejected時(shí)被調(diào)用。

注意事項(xiàng)：
catch(rejectHandler) 
    等同于
.then(null, rejectHandler)或.then(undefined, rejectHandler)

但是 then(resolveHandler).catch(rejectHandler) 和then(resolveHandler, rejectHandler)
不是完全相同的。
區(qū)別在于：當(dāng)使用then(resolveHandler, rejectHandler)格式時(shí)，如果resolveHandler本身拋出了錯(cuò)誤，那么rejecthandler實(shí)際上不會(huì)捕獲錯(cuò)誤。所以更建議使用catch 而不是then的第二個(gè)參數(shù)。

示例：
    var p1 = new Promise((resolve, reject) => {
        resolve("one");
    });
    
    // catch函數(shù)中可以捕捉到resolveHandler 中的error并打印
    p1.then(function () {
        throw new Error("oh noes");
    }).catch(function (err) {
        console.log("err=", err); // Error: oh noes
    });
    
    // reject函數(shù)不能捕捉到resolveHandler中的error
    p1.then(function () {
        throw new Error("oh noes");
    }, function (err) {
        console.log("err=", err); 
    });

Promise.prototype.finally(onFinally)

用于指定不管 Promise 對(duì)象最后狀態(tài)如何，都會(huì)執(zhí)行的操作

finally本質(zhì)上是then方法的特例
promise
.finally(() => {
  // 語(yǔ)句
});

// 等同于
promise
.then(
  result => {
    // 語(yǔ)句
    return result;
  },
  error => {
    // 語(yǔ)句
    throw error;
  }
);
返回值：返回一個(gè)Promise，這個(gè)Promise對(duì)象設(shè)置了 finally 回調(diào)函數(shù)
參數(shù)：Promise 結(jié)束后調(diào)用的函數(shù)，onFinally 這個(gè)函數(shù)不接收任何參數(shù)，它僅用于無(wú)論最終結(jié)果如何都要執(zhí)行的情況。所以finally方法里面的操作，不應(yīng)依賴于 Promise 的執(zhí)行結(jié)果。
示例：
    promise
    .then(result => {···})
    .catch(error => {···})
    .finally(() => {···});

Promise.resolve(value)

用于將現(xiàn)有對(duì)象轉(zhuǎn)為 Promise 對(duì)象
    new Promise(function (resolve, reject) {
      resolve(someSynchronousValue);
    }).then(/* ... */);
    等價(jià)于
    Promise.resolve(someSynchronousValue).then(/* ... */);

返回值：返回一個(gè)Promise 對(duì)象，這個(gè)Promise對(duì)象是被給定的值解析過(guò)的。
參數(shù)：
    value
        將被Promise對(duì)象解析的參數(shù)
        參數(shù)類型：
            Promise對(duì)象
            具有then方法的對(duì)象
            沒(méi)有then方法的對(duì)象
            不帶有任何參數(shù)

示例1：參數(shù)是一個(gè)Promise對(duì)象
    Promise.resolve將不做任何修改、原封不動(dòng)地返回這個(gè)Promise對(duì)象

    var p = Promise.resolve([1,2,3]);
    console.log("p=", p); //"p=" [object Promise]
    console.log("p type= ", typeof(p)); // "p type= " "object"
    p.then(function(v) {
      console.log("v=",v); //"v=" Array [1, 2, 3]
      console.log("v type=",typeof(v)); //"v type=" "object"
    });
    
    var p2 =  Promise.resolve(p);
    console.log("p2=", p2); //"p2=" [object Promise]
    console.log("p2 type= ", typeof(p2)); //"p2 type= " "object"
    p2.then(function(v) {
      console.log("p2 v=",v); //"p2 v=" Array [1, 2, 3]
      console.log("p2 v type=",typeof(v)); //"p2 v type=" "object"
    });

    p2 == p
示例2：參數(shù)是一個(gè)具有then方法的對(duì)象
    返回的promise會(huì)采用這個(gè)thenable的對(duì)象的最終狀態(tài)。

    let thenable = {
      then: function(resolve, reject) {
        resolve(42);
      }
    };
    
    let p = Promise.resolve(thenable);
    p.then(function(value) {
      console.log(value);  // 42
    });

    Promise.resolve方法會(huì)將thenable對(duì)象轉(zhuǎn)為 Promise 對(duì)象，然后就立即執(zhí)行thenable對(duì)象的then方法,thenable對(duì)象的then方法執(zhí)行后，對(duì)象p的狀態(tài)就變?yōu)閞esolved，從而立即執(zhí)行最后那個(gè)then方法指定的回調(diào)函數(shù)，輸出 42

示例3：參數(shù)是一個(gè)沒(méi)有then方法的對(duì)象
    var p = Promise.resolve([1,2,3]);
    console.log("p=", p); //"p=" [object Promise]
    console.log("p type= ", typeof(p)); // "p type= " "object"
    p.then(function(v) {
      console.log("v=",v); //"v=" Array [1, 2, 3]
      console.log("v type=",typeof(v)); //"v type=" "object"
    });
    
    var p = Promise.resolve(123);
    console.log("p=", p); //"p=" [object Promise]
    console.log("p type= ", typeof(p)); // "p type= " "object"
    p.then(function(v) {
      console.log("v=",v); //"v=" 123
      console.log("v type=",typeof(v)); //"v type=" "number"
    });
    
    var p = Promise.resolve("123");
    console.log("p=", p); //"p=" [object Promise]
    console.log("p type= ", typeof(p)); // "p type= " "object"
    p.then(function(v) {
      console.log("v=",v); //"v=" "123"
      console.log("v type=",typeof(v)); //"v type=" "string"
    });

示例4：不帶有任何參數(shù)
    var p = Promise.resolve();
    console.log("p=", p); //"p=" [object Promise]
    console.log("p type= ", typeof(p)); // "p type= " "object"
    p.then(function(v) {
      console.log("v=",v); //"v=" undefined
      console.log("v type=",typeof(v)); //"v type=" "undefined"
    });

注意事項(xiàng)：
    立即resolve()的 Promise 對(duì)象，是在本輪“事件循環(huán)”（event loop）的結(jié)束時(shí)執(zhí)行，而不是在下一輪“事件循環(huán)”的開始時(shí)
        //在下一輪“事件循環(huán)”開始時(shí)執(zhí)行
        setTimeout(function () { 
          console.log("three");
        }, 0);
        //在本輪“事件循環(huán)”結(jié)束時(shí)執(zhí)行
        Promise.resolve().then(function () {
          console.log("two");
        });
        //立即執(zhí)行
        console.log("one");
    結(jié)果：
        "one"
        "two"
        "three"

Promise.reject(reason)

返回值：返回一個(gè)Promise 對(duì)象，這個(gè)Promise 對(duì)象 帶有狀態(tài)是rejected的原因
參數(shù)：
    reason
        表示Promise被拒絕的原因
    new Promise(function (resolve, reject) {
      reject(someSynchronousReson);
    }).then(null,function(reason){
       //...
    });

等價(jià)于
    Promise.reject(someSynchronousReson)
    .then(null, function(reason) {
      //...
    });

    
示例:
    new Promise(function (resolve, reject) {
      reject("reject reason");
    }).then(null,function(reason){
            console.log(reason);//"reject reason"
    });
    
    Promise.reject("reject reason").then(null, function(reason) {
      console.log(reason); // "reject reason"
    });
    
    Promise.reject(new Error("reject reason")).then(null, function(error) {
      console.log(error); // Error: reject reason
    });

注意事項(xiàng)：與Promise.resolve不同的是Promise.reject()方法的參數(shù)，會(huì)原封不動(dòng)地作為reject的理由，變成后續(xù)方法的參數(shù)。
    const thenable = {
      then(resolve, reject) {
        reject("出錯(cuò)了");
      }
    };
    
    Promise.reject(thenable)
    .catch(e => { //e不是reject拋出的“出錯(cuò)了”這個(gè)字符串，而是thenable對(duì)象。
      console.log(e === thenable) // true
    })

Promise.all(iterable)

用于將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例
返回值：返回一個(gè)新的promise對(duì)象，iterable中所有的promise都變成resolved狀態(tài)時(shí)返回的 promise才會(huì)變?yōu)閞esolved狀態(tài)； iterable中有一個(gè)promise變成rejected狀態(tài)，promise就會(huì)變?yōu)閞ejected狀態(tài)。
參數(shù)：
    iterable
    一個(gè)可迭代對(duì)象，eg Array 或 String

示例： iterable中所有的promise都變成resolved狀態(tài)時(shí)返回的 promise才會(huì)變?yōu)閞esolved狀態(tài)
    var p1 = new Promise((resolve, reject) => { 
      setTimeout(resolve, 1000, "one"); 
    }); 
    var p2 = new Promise((resolve, reject) => { 
      setTimeout(resolve, 2000, "two"); 
    });
    var p3 = new Promise((resolve, reject) => {
      setTimeout(resolve, 3000, "three");
    });
    const p = Promise.all([p1, p2, p3]).then(values => { 
      console.log(values); //["one", "two", "three"]
    }).catch(reason => {
      console.log(reason); //沒(méi)執(zhí)行
    });

    流程：p創(chuàng)建時(shí)為pending狀態(tài)，當(dāng)p1, p2, p3的狀態(tài)都變成resolved時(shí)觸發(fā)p變成resolved狀態(tài)。
    p1    1s
    |----------|resolved                      
    p2    2s 
    |--------------------|resolved
    p3    3s 
    |------------------------------|resolved
                                   p resolved
                                   

示例：iterable中有一個(gè)promise變成rejected狀態(tài)，promise就會(huì)變?yōu)閞ejected狀態(tài)
    var p1 = new Promise((resolve, reject) => { 
      setTimeout(resolve, 1000, "one"); 
    }); 
    var p2 = new Promise((resolve, reject) => { 
      setTimeout(resolve, 2000, "two"); 
    });
    var p3 = new Promise((resolve, reject) => {
      reject("reject");
    });
    const p = Promise.all([p1, p2, p3]).then(values => { 
      console.log(values); //沒(méi)執(zhí)行
    }).catch(reason => {
      console.log(reason); //"reject"
    });    

    流程：p創(chuàng)建時(shí)為pending狀態(tài)，p3先執(zhí)行完,p3的狀態(tài)變成rejected時(shí)觸發(fā)p變成rejected狀態(tài)。
    p1    1s
    |----------|resolved                      
    p2    2s 
    |--------------------|resolved
    p3
    |-|rejected
      p rejected
      

示例：如果作為參數(shù)的 Promise 實(shí)例，自己定義了catch方法，那么它一旦被rejected，并不會(huì)觸發(fā)Promise.all()的catch方法
    var p1 = new Promise((resolve, reject) => { 
          setTimeout(resolve, 1000, "one"); 
        }); 
        var p2 = new Promise((resolve, reject) => { 
          setTimeout(resolve, 2000, "two"); 
        });
        var p3 = new Promise((resolve, reject) => {
          reject("reject");
        }).catch(reason => {
          console.log(reason); //reject
        });
        const p = Promise.all([p1, p2, p3]).then(values => { 
          console.log(values); // ["one", "two", undefined]
        }).catch(reason => {
          console.log(reason); //沒(méi)執(zhí)行
        });    


    流程：p創(chuàng)建時(shí)為pending狀態(tài)，p3先執(zhí)行完,p3的狀態(tài)變成rejected時(shí)，調(diào)用自己定義的catch函數(shù)拋出錯(cuò)誤，不會(huì)觸發(fā)p變成rejected狀態(tài)。當(dāng)p1 和 p2 也執(zhí)行完時(shí)，觸發(fā)p變成resolved狀態(tài)
    p1    1s
    |----------|resolved                      
    p2    2s 
    |--------------------|resolved
    p3
    |-|rejected
                           |p resolved

示例：如果傳入的參數(shù)是一個(gè)空的可迭代對(duì)象，則返回一個(gè)resolved狀態(tài)的 Promise 
    const p = Promise.all([]).then(values => { //p創(chuàng)建時(shí)狀態(tài)就為resolved
      console.log(values); // []
    });

Promise.race(iterable)

同樣是將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例
返回值：返回一個(gè)新的promise對(duì)象，一旦iterable中的某個(gè)promise變?yōu)閞esolved或rejected狀態(tài)，返回的 promise就會(huì)變?yōu)閞esolved或rejected狀態(tài)。誰(shuí)最先執(zhí)行完就返回誰(shuí)的狀態(tài)
參數(shù)：
    iterable
    一個(gè)可迭代對(duì)象，eg Array 或 String

示例： 一旦iterable中的某個(gè)promise變?yōu)閞esolved狀態(tài)，返回的 promise就會(huì)變?yōu)閞esolved狀態(tài)。
    var p1 = new Promise((resolve, reject) => { 
      setTimeout(resolve, 1000, "one"); 
    }); 
    var p2 = new Promise((resolve, reject) => { 
      setTimeout(resolve, 2000, "two"); 
    });
    var p3 = new Promise((resolve, reject) => {
      setTimeout(resolve, 3000, "three");
    });
    const p = Promise.race([p1, p2, p3]).then(values => { 
      console.log(values); //["one", "two", "three"]
    }).catch(reason => {
      console.log(reason); //沒(méi)執(zhí)行
    });

流程：p創(chuàng)建時(shí)為pending狀態(tài)，p1先執(zhí)行完，p1的狀態(tài)都變成resolved時(shí)觸發(fā)p變成resolved狀態(tài)。
p1    1s
|----------|resolved
           p resolved                      
p2    2s 
|--------------------|resolved
p3    3s 
|------------------------------|resolved
                               
                                   
示例：一旦iterable中的某個(gè)promise變?yōu)閞ejected狀態(tài)，返回的 promise就會(huì)變?yōu)閞ejected狀態(tài)。
var p1 = new Promise((resolve, reject) => { 
  setTimeout(resolve, 1000, "one"); 
}); 
var p2 = new Promise((resolve, reject) => { 
  setTimeout(resolve, 2000, "two"); 
});
var p3 = new Promise((resolve, reject) => {
  reject("reject");
});
const p = Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); //沒(méi)執(zhí)行
}).catch(reason => {
  console.log(reason); //"reject"
});    

流程：p創(chuàng)建時(shí)為pending狀態(tài)，p3先執(zhí)行完,p3的狀態(tài)變成rejected時(shí)觸發(fā)p變成rejected狀態(tài)。
p1    1s
|----------|resolved                      
p2    2s 
|--------------------|resolved
p3
|-|rejected
  p rejected