首頁 > web前端 > js教程 > 學習 javascript 承諾。部分 什麼是承諾?

學習 javascript 承諾。部分 什麼是承諾?

Mary-Kate Olsen
發布: 2025-01-03 22:33:40
原創
715 人瀏覽過

學習 javascript 承諾。第 1 部分 — 什麼是承諾?

嘿,JavaScript 粉絲們,今天我將向您介紹 Promise 以及如何更好地學習或理解它們。很多人認為這是一個複雜的話題,對此感到困惑,儘管這沒有什麼棘手的,如果你經常練習,你會成為專家,我保證。我今天的任務是幫助您理解基礎知識,並展示 Promise 的本質以及為什麼我們需要它們。

什麼是 Promise,為什麼在 JavaScript 中需要它?

想像一下,您已向朋友保證每天早上都會​​堅持鍛煉,如果您這樣做了,請通知他們。你的承諾並不妨礙你或你的朋友過他們的生活,他們只是在等待你關於承諾成功或失敗的通知,以便對你做出結論或採取行動。

這個小例子說明了 Promise 作為事件的本質以及透過該事件連接的兩個參與者:在本例中,是消費者(你的朋友)和生產者(你):

Learn javascript promises. Part  What is a promise?

如果我們稍微簡化一下,我們可以說在javascript 中我們看到了與Promise 類別相同的行為,它使我們能夠在不阻塞javascript 主執行緒的情況下執行非同步任務,並在完成時通知訂閱者我們的承諾。

讓我們舉個例子來了解如何使用它:

Learn javascript promises. Part  What is a promise?

讓我們按順序回顧這段程式碼:

  1. 我們使用執行器函數建立promise實例(這是我們傳遞給Promise類別建構子的函數)。

執行器函數是promise的基礎,這個函數在promise創建時立即被呼叫。

執行器函數有兩個位置參數,第一個是resolve方法,第二個是reject方法。這兩種方法都負責在一段時間內完成 Promise。

例如,我們承諾一週每天早上起床運動。在這種情況下,我們的 Promise 會持續一整週,如果你在第 3 天無法兌現,你可以呼叫拒絕方法,每個訂閱你 Promise 的人都會知道這一點。反之亦然,如果你遵守了你的承諾,那麼在第 7 天你將調用resolve方法,該方法將通知你的朋友你已經成功地遵守了你的承諾。所以你可以看到,消費者(你的朋友)完全獨立於你何時告訴他們結果,他們只需要確保當他們告訴他們結果時,他們就能得到結果。

下圖顯示了可能的 Promise 狀態,它們是「pending」、「fulfilled」和「rejected」。當一個 Promise 剛發起時,它的狀態是「pending」。完成後,它要么“已完成”,要么“被拒絕”,這取決於調用哪個方法來完成它。

Learn javascript promises. Part  What is a promise?

也值得注意的是,一個 Promise 執行器不能完成多次,所有後續對resolve或reject方法的呼叫都將被忽略。

  1. 當你說你完成了你的promise(透過呼叫resolve或reject)方法時,所有訂閱了promise的人都會收到一條帶有有效負載的通知,可以在promise實例的兩個特殊方法中檢索該通知。這些方法是: Promise.prototype.then 和 Promise.prototype.catch

Learn javascript promises. Part  What is a promise?

使用 Promise.prototype.then 方法,您可以同時處理正面和負面場景,因為函數接受兩個回調,如上面的螢幕截圖所示。

使用 Promise.prototype.catch 你只能處理像這樣的負面場景:

Learn javascript promises. Part  What is a promise?

並保留 Promise.prototype.then 以獲得正面的場景。

此外,promise 還提供了一種方法,您可以使用該方法來執行無論結果如何都應該執行的程式碼。這個方法就是Promise.prototype.finally:

Learn javascript promises. Part  What is a promise?

此方法不執行任何操作並且不返回任何內容,因為它旨在完成或清理先前的操作。例如,向使用者顯示訊息或隱藏載入程式。

太好了,至此,我們已經介紹了Promise 的基礎知識,所以我建議我們繼續看一個實際示例,例如從API 請求數據,將其從原始HTTP 響應轉換為JSON,然後輸出到控制台:

Learn javascript promises. Part  What is a promise?

正如你所看到的,在現實世界中使用它的結果與我們在文章開頭練習的技能沒有太大區別。但是,您可能仍然注意到了一些新的事情:

  • 之前每個 Promise.prototype.then 和 Promise.prototype.catch 處理程序的結果都會傳遞到下一個 Promise 處理程序。值得一提的是,Response.json 方法傳回一個 Promise,該 Promise 在執行時將傳回一個 JSON,並呼叫下列處理程序將該 JSON 傳遞給它。

  • 就 Promise.prototype.finally 而言,它是一個「隱形」處理程序,你可以說它將前一個回應透過自身傳遞到下一個回應。

太棒了,我相信現在您已經更好地理解了 Promise 是什麼、如何使用它以及它可以有什麼狀態。另外,我想在下面列出我們今天討論的要點(備忘錄):

概括:

  • Javascript Promise — 它是一個特殊的對象,允許您執行非同步操作並在完成時通知消費者

  • Promise 實例可以有 3 種狀態-「pending」、「fulfilled」和「rejected」

  • Promise 實例有 3 個主要方法—「then」、「catch」和「finally」。

  • Promise.prototype.then — 旨在處理拒絕和成功結果

  • Promise.prototype.catch — 旨在處理拒絕的結果

  • Promise.prototype.finally — 旨在進行一些清理工作

  • 您可以按照您想要的任何順序連結處理程序,它們將按順序執行

  • 前一個 Promise 的結果會進入下一個 Promise,因此為了讓 Promise 鏈可擴展,您必須記住每次都從處理程序傳回一個 Promise,除了「finally」處理程序。

在本主題的後續部分中,我們將介紹更高級的 Promise 技術並深入研究其功能,因此請訂閱、按讚並保持關注!

以上是學習 javascript 承諾。部分 什麼是承諾?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板