ES6 Promise

mengbo 發布于2019-08-23 18:40 / 814人閱讀

摘要：可以捕獲返回值返回一個，處理狀態變為的情況參數是一個函數，有一個參數，用來記錄變成狀態返回的原因。示例用于將現有對象轉為對象等價于返回值返回一個對象，這個對象是被給定的值解析過的。

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

Promises

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

Promise 對象

用于表示一個異步操作的最終狀態（完成或失?。约霸摦惒讲僮鞯慕Y果值。

Promise 使用

Promise適用于這樣的場景，后面的操作必須根據前面的操作的結果做出相應的反應。 那么后面的操作必須等前面的操作完成并且獲得前面操作的結果。

假設我們現在有三個操作doSomethingFirst，doSomethingSecond 和finalHandler。
doSomethingSecond 需要根據 doSomethingFirst 的結果做出反應
finalHandler 需要根據 doSomethingSecond 的結果做出反應
流程如下：

//resOfDoSomethingFirst 是 DoSomethingFirst的結果
  doSomethingFirst
|-----------------|
                  doSomethingSecond(resOfDoSomethingFirst)
                  |------------------|
                                     finalHandler(doSomethingSecond的結果)
                                     |------------------|
實現這個場景需要解決以下兩個問題：
    后面的操作 如何知道 前面的操作 完成了
    后面的操作 如何知道 前面的操作 的執行結果是什么

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

  if (/*操作成功 */){
    resolve(doSomethingFirstValue);     //將doSomethingFirst對象的狀態從“pending”變為“resolved”
  } else {
    reject(doSomethingFirstError);
  }
});

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

//整個操作流程如下：
doSomethingFirst()
    .then(doSdoSomethingSecond)
    .then(finalHandler)
    .catch(function (err) {
      console.log(err);
    })
    .finally(() => {···});
    
通過new Promise創建的Promise 實例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 操作完成了
    通過doSomethingFirst狀態的變更通知。

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

    resolve()函數：
        在異步操作成功時調用
        作用是：將Promise對象的狀態從 pending 變為 fulfilled，并將異步操作的結果，作為參數傳遞出去；
    reject()函數：
        在異步操作失敗時調用
        作用是：將Promise對象的狀態從 pending 變為 rejected， 并將異步操作的錯誤，作為參數傳遞出去。

    當操作完成時(Promise對象的狀態變為fulfilled 或 rejected時)，doSomethingFirst 就會通過then()函數調用doSomethingSecond，doSomethingSecond就知道doSomethingFirst已經完成了。
2. doSomethingSecond 如何知道 doSomethingFirst 的執行結果是什么
    doSomethingFirst通過給then()函數調用doSomethingSecond(resOfDoSomethingFirst)并把執行結果resOfDoSomethingFirst作為參數傳遞給doSomethingSecond

Promise.prototype.then(onFulfilled, onRejected)

用于為 Promise 實例添加狀態改變時的回調函數
返回值：一個新的 Promise，所可以采用鏈式寫法，then()函數后面再調用then()函數
參數：
    onFulfilled 
        是一個函數，有一個參數，用來記錄變成fulfilled狀態返回的結果
        當doSomethingFirst這個Promise的狀態變成fulfilled 時，onFulfilled作為回調函數被調用
    onRejected
        是一個函數，有一個參數，用來記錄變成rejected狀態返回的原因
        當doSomethingFirst這個Promise的狀態變成rejected 時，onRejected作為回調函數被調用

    在當前的例子里參數onFulfilled就是doSomethingSecond(resOfDoSomethingFirst)，resOfDoSomethingFirst 記錄了doSomethingFirst 變成fulfilled狀態返回的結果。

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


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

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

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

通常情況下，一個promise 依賴于另一個promise ，但當我們需要兩個promises的輸出。我們該怎么做
    getUserByName("nolan").then(function (user) {
      return getUserAccountById(user.id);
    }).then(function (userAccount) {
      // 在這里我們已經獲取到了用戶賬號userAccount，
      // 但是我們也需要user對象時該怎么做？
    });    

    解決方案：
    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)

用于指定發生錯誤時的回調函數。catch 可以捕獲
返回值：返回一個Promise，處理狀態變為rejected的情況
參數：
    onRejected
        是一個函數，有一個參數，用來記錄變成rejected狀態返回的原因。
        當promise 狀態變為rejected時被調用。

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

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

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

Promise.prototype.finally(onFinally)

用于指定不管 Promise 對象最后狀態如何，都會執行的操作

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

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

Promise.resolve(value)

用于將現有對象轉為 Promise 對象
    new Promise(function (resolve, reject) {
      resolve(someSynchronousValue);
    }).then(/* ... */);
    等價于
    Promise.resolve(someSynchronousValue).then(/* ... */);

返回值：返回一個Promise 對象，這個Promise對象是被給定的值解析過的。
參數：
    value
        將被Promise對象解析的參數
        參數類型：
            Promise對象
            具有then方法的對象
            沒有then方法的對象
            不帶有任何參數

示例1：參數是一個Promise對象
    Promise.resolve將不做任何修改、原封不動地返回這個Promise對象

    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：參數是一個具有then方法的對象
    返回的promise會采用這個thenable的對象的最終狀態。

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

    Promise.resolve方法會將thenable對象轉為 Promise 對象，然后就立即執行thenable對象的then方法,thenable對象的then方法執行后，對象p的狀態就變為resolved，從而立即執行最后那個then方法指定的回調函數，輸出 42

示例3：參數是一個沒有then方法的對象
    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：不帶有任何參數
    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"
    });

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

Promise.reject(reason)

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

等價于
    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
    });

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

Promise.all(iterable)

用于將多個 Promise 實例，包裝成一個新的 Promise 實例
返回值：返回一個新的promise對象，iterable中所有的promise都變成resolved狀態時返回的 promise才會變為resolved狀態； iterable中有一個promise變成rejected狀態，promise就會變為rejected狀態。
參數：
    iterable
    一個可迭代對象，eg Array 或 String

示例： iterable中所有的promise都變成resolved狀態時返回的 promise才會變為resolved狀態
    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); //沒執行
    });

    流程：p創建時為pending狀態，當p1, p2, p3的狀態都變成resolved時觸發p變成resolved狀態。
    p1    1s
    |----------|resolved                      
    p2    2s 
    |--------------------|resolved
    p3    3s 
    |------------------------------|resolved
                                   p resolved
                                   

示例：iterable中有一個promise變成rejected狀態，promise就會變為rejected狀態
    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); //沒執行
    }).catch(reason => {
      console.log(reason); //"reject"
    });    

    流程：p創建時為pending狀態，p3先執行完,p3的狀態變成rejected時觸發p變成rejected狀態。
    p1    1s
    |----------|resolved                      
    p2    2s 
    |--------------------|resolved
    p3
    |-|rejected
      p rejected
      

示例：如果作為參數的 Promise 實例，自己定義了catch方法，那么它一旦被rejected，并不會觸發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); //沒執行
        });    


    流程：p創建時為pending狀態，p3先執行完,p3的狀態變成rejected時，調用自己定義的catch函數拋出錯誤，不會觸發p變成rejected狀態。當p1 和 p2 也執行完時，觸發p變成resolved狀態
    p1    1s
    |----------|resolved                      
    p2    2s 
    |--------------------|resolved
    p3
    |-|rejected
                           |p resolved

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

Promise.race(iterable)

同樣是將多個 Promise 實例，包裝成一個新的 Promise 實例
返回值：返回一個新的promise對象，一旦iterable中的某個promise變為resolved或rejected狀態，返回的 promise就會變為resolved或rejected狀態。誰最先執行完就返回誰的狀態
參數：
    iterable
    一個可迭代對象，eg Array 或 String

示例： 一旦iterable中的某個promise變為resolved狀態，返回的 promise就會變為resolved狀態。
    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); //沒執行
    });

流程：p創建時為pending狀態，p1先執行完，p1的狀態都變成resolved時觸發p變成resolved狀態。
p1    1s
|----------|resolved
           p resolved                      
p2    2s 
|--------------------|resolved
p3    3s 
|------------------------------|resolved
                               
                                   
示例：一旦iterable中的某個promise變為rejected狀態，返回的 promise就會變為rejected狀態。
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); //沒執行
}).catch(reason => {
  console.log(reason); //"reject"
});    

流程：p創建時為pending狀態，p3先執行完,p3的狀態變成rejected時觸發p變成rejected狀態。
p1    1s
|----------|resolved                      
p2    2s 
|--------------------|resolved
p3
|-|rejected
  p rejected

云服務器 GPU云服務器 es6中的promise promise Promise使用 promise用法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105641.html

ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
通過 ES6 Promise 和 jQuery Deferred 的異同學習 Promise

摘要：和和都有和，但是略有不同。實際上返回的是一個對象。和添加的回調，添加的回調。所以在調用成功的情況下執行添加的回調，調用失敗時執行添加的回調。，產生對象并，產生對象并，然后繼續處理，的語法糖，和的差不多但不同。 Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise，但是略有不同。不過它們的作用可以簡單的用兩句話來描述 Deffere...

Yujiaao 2019-08-21 10:39 評論0 收藏0
es6 - Promise

摘要：所謂異步編程中的異步是相對于同步的概念的。是一系列異步編程規范的統稱。如果中的回調函數返回一個值，那么返回的將會成為接受狀態，并且將返回的值作為接受狀態的回調函數的參數值。參考介紹基礎篇深入理解與異步編程。 es6 promise與異步編程對于一些還不具備大量編程經驗的朋友來說，promise可能是es6比較難以掌握的點。首先是很多名詞，比如Promises，es6 Promise,...

wemallshop 2019-08-22 15:11 評論0 收藏0
JavaScript 異步

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。寫一個符合規范并可配合使用的寫一個符合規范并可配合使用的理解的工作原理采用回調函數來處理異步編程。 JavaScript怎么使用循環代替(異步)遞歸問題描述在開發過程中，遇到一個需求：在系統初始化時通過http獲取一個第三方服務器端的列表，第三方服務器提供了一個接口，可通過...

tuniutech 2019-08-21 18:34 評論0 收藏0
淺談ES6原生Promise

摘要：如果有錯誤，則到的第二個回調函數中，對錯誤進行處理。假設第一個的第一個回調沒有返回一個對象，那么第二個的調用者還是原來的對象，只不過其的值變成了第一個中第一個回調函數的返回值。 ES6標準出爐之前，一個幽靈，回調的幽靈，游蕩在JavaScript世界。正所謂：世界本沒有回調，寫的人多了，也就有了})})})})})。 Promise的興起，是因為異步方法調用中，往往會出現回調函數一...

yedf 2019-08-20 10:30 評論0 收藏0
ES6的Promise：要優雅，也要浪漫

摘要：就算改變已經發生了，即使再對對象添加回調函數，也會立即得到這個結果。方法接收個參數，第一個參數是狀態的回調函數，第二個參數可選是狀態的回調函數。簡單來講，就是能把原來的回調寫法分離出來，在異步操作執行完后，用鏈式調用的方式執行回調函數。在ECMAScript 6標準中，Promise被正式列為規范，Promise，字面意思就是許諾，承諾，嘿，聽著是不是很浪漫的說？我們來探究一下這個浪...

weizx 2019-08-20 12:04 評論0 收藏0