javaScript中Promise深度理解

anonymoussf 發布于2019-08-23 12:39 / 2732人閱讀

摘要：共有三種狀態，相應狀態會觸發相應的回調函數。在函數中調用在中調用在中的返回值為一個普通值值作為的值。如果中的回調函數拋出一個錯誤，那么返回的將會成為拒絕狀態，并且將拋出的錯誤作為拒絕狀態的回調函數的參數值。

用途

用于處理異步操作，避免地獄式回調，比如ajax請求，處理起來更加簡單方便，代碼看起來也更容易理解，便于維護。

概念

Promise 對象用于表示一個異步操作的最終狀態（完成或失敗），以及其返回的值。 Promise共有三種狀態，相應狀態會觸發相應的回調函數。

pending: 初始狀態。什么回調函數也不觸發。

調用構造函數如new Promise((resolve, reject) => {}),在這個exextutor函數中要么調用resolve是狀態改為完成，要么調用reject使狀態改為失敗，要么就什么都不調用，這個時候就是pending狀態，此時[[PromiseValue]]為undefined。

    var result = new Promise((resolve, reject) => {
    
    })

在.then或.catch中返回值為上面直接使用構造函數的情況，并且在其內部也什么都不返回，那么這個時候也是pending。

    var result = new Promise((resolve, reject) => {
        resolve("xxx")
    }).then((res) => {
        return new Promise((resolve, reject) => {
    
        })
    })

在.then或.catch中無返回值的時候，這個時候返回的狀態為前面的Promise的狀態，如果前面的狀態為pending,那么這里返回的也是pending,只不過沒有返回值，返回的Promise中[[PromiseValue]]為undefined。

    var result = new Promise((resolve, reject) => {
        
    }).then((res) => {

    })

fulfilled: 成功狀態。觸發綁定的‘onfulfilled’方法。

在executor函數中調用resolve

  var result = new Promise((resolve, reject) => {
      resolve("xxx")
  })

在.then .catch中調用Promsie.resolve

 var result = new Promise((resolve, reject) => {
       resolve("xxx")
 }).then((res) => {
     return Promise.resolve("bbbb")
 })

在.then .catch中的返回值為一個普通值,值作為[[PromiseValue]]`的值。

 var result = new Promise((resolve, reject) => {
       resolve("xxx")
 }).then((res) => {
     return "xxxx"
 })

在.then或.catch中無返回值的時候，這個時候返回的狀態為前面的Promise的狀態，如果前面的狀態為resolved,那么這里返回的也是resolved,只不過沒有返回值，返回的Promise中[[PromiseValue]]為undefined。

    var result = new Promise((resolve, reject) => {
        resolve("xxx")
    }).then((res) => {
        
    })

rejected: 失敗狀態。觸發綁定的‘onrejected’方法。

在executor函數中調用rejecte

  var result = new Promise((resolve, reject) => {
      reject("xxx")
  })

在.then .catch中調用Promsie.reject

 var result = new Promise((resolve, reject) => {
       resolve("xxx")
 }).then((res) => {
     return Promise.reject("bbbb")
 })

在.then .catch中拋出一個錯誤時，狀態改為rejected，并且觸發onrejected函數，錯誤信息將作為作為拒絕狀態的回調函數的參數值和拒絕狀態的Promise中[[PromiseValue]]的值。

 var result = new Promise((resolve, reject) => {
       resolve("xxx")
 }).then((res) => {
     throw "xxxx"
 }).catch((err) => {
      console.log(err) // xxxx
 })
 console.log(result) // {[[PromiseStatus]]: "rejected",  [[PromiseValue]]: "xxxx"}

.then

p.then(onFulfilled, onRejected);

當狀態變成成功狀態的時候調用onFulfilled, 當狀態變成失敗的時候，調用onRejected。它返回一個Promise，而它的行為與then中的回調函數的返回值有關：

如果then中的回調函數返回一個值，那么then返回的Promise將會成為接受狀態，并且將返回的值作為接受狀態的回調函數的參數值。

如果then中的回調函數拋出一個錯誤，那么then返回的Promise將會成為拒絕狀態，并且將拋出的錯誤作為拒絕狀態的回調函數的參數值。

如果then中的回調函數返回一個已經是接受狀態的Promise，那么then返回的Promise也會成為接受狀態，并且將那個Promise的接受狀態的回調函數的參數值作為該被返回的Promise的接受狀態回調函數的參數值。

如果then中的回調函數返回一個已經是拒絕狀態的Promise，那么then返回的Promise也會成為拒絕狀態，并且將那個Promise的拒絕狀態的回調函數的參數值作為該被返回的Promise的拒絕狀態回調函數的參數值。

如果then中的回調函數返回一個未定狀態（pending）的Promise，那么then返回Promise的狀態也是未定的，并且它的終態與那個Promise的終態相同；同時，它變為終態時調用的回調函數參數與那個Promise變為終態時的回調函數的參數是相同的。

Promise.resolve

參數可以是三種參數類型

Promise.resolve(value);

Promise.resolve(promise);

Promise.resolve(thenable);

如果參數類型是普通的值那么返回的Promise狀態仍然是resolve,值為返回的值，如果返回值是另外兩種情況，那么返回的Promise的狀態由返回值來決定。例如下面的例子返回的是reject,值為xxxx

        var result = Promise.resolve(new Promise((resolve, reject) => {
                reject("xxxx")
        }))

Promise.reject

接收一個參數，但是參數不會影響返回的Promise結果，通過Promise.reject返回的狀態始終都是reject。

Promise.all

當我們需要并行執行多個異步的時候，就可以使用這個方法，該方法接收一個可以迭代的對象，例如數組，數組中一般都是我們需要并行運行的Promise對象，如果是普通值那么也會直接返回。只有每一項都為resolve時，才會調用.then中的成功方法，并且回調參數值一個包含前面所有結果的數組，并且順序也和前面一樣，否則調用失敗的回調。看個例子

var a = 1
var b = new Promise((resolve, reject) => {
    setTimeout(function(){
        resolve("xxxx")
    }, 1000)
})
var c = Promise.resolve("aaa")
var result = Promise.all([a, b, c]).then((values) => {
    console.log(values) // 1, xxx, aaa
}).catch((err) => {
    console.log(err)
})

對于Promise.all的同步或者異步，如果值是空的可迭代對象，那么將是同步的，其他情況均為異步。

GPU云服務器云服務器深度學習理解如何理解深度學習用深度學習理解深度學習的理解

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

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

ES6-7

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

mudiyouyou 2019-08-21 18:40 評論0 收藏0
JS筆記

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。 TypeScript 入門教程從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。網絡基礎知識之 HTTP 協議詳細介紹 HTT...

rottengeek 2019-08-22 13:58 評論0 收藏0
JavasScript重難點知識

摘要：忍者級別的函數操作對于什么是匿名函數，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數是一個很重要且具有邏輯性的特性。通常，匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果...

forsigner 2019-08-21 18:36 評論0 收藏0
深度理解Promise--Promise的特點和方法詳解

摘要：實例生成以后，用方法分別指定狀態和狀態的回調函數。則是或的別名，用于指定發生錯誤時的回調函數。上述代碼也可以理解成這樣處理和前一個回調函數運行時發生的錯誤發生錯誤方法用于指定不管對象最后狀態如何，都會執行的回調函數。什么是promise？ Promise（承諾），在程序中的意思就是承諾我過一段時間（通常是一個異步操作）后會給你一個結果，是異步編程的一種解決方案。從語法上說，原生Pro...

wqj97 2019-08-26 10:48 評論0 收藏0
JavaScript 異步

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

tuniutech 2019-08-21 18:34 評論0 收藏0