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

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

Jan 03, 2025 pm 10:33 PM

學習 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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1657
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1229
24
神秘的JavaScript:它的作用以及為什麼重要 神秘的JavaScript:它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

JavaScript的演變:當前的趨勢和未來前景 JavaScript的演變:當前的趨勢和未來前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

JavaScript引擎:比較實施 JavaScript引擎:比較實施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

JavaScript:探索網絡語言的多功能性 JavaScript:探索網絡語言的多功能性 Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

Python vs. JavaScript:學習曲線和易用性 Python vs. JavaScript:學習曲線和易用性 Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

如何使用Next.js(前端集成)構建多租戶SaaS應用程序 如何使用Next.js(前端集成)構建多租戶SaaS應用程序 Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

從C/C到JavaScript:所有工作方式 從C/C到JavaScript:所有工作方式 Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

如何安裝JavaScript? 如何安裝JavaScript? Apr 05, 2025 am 12:16 AM

JavaScript不需要安裝,因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中,通過標籤嵌入HTML文件中運行。 2)在Node.js環境中,下載並安裝Node.js後,通過命令行運行JavaScript文件。

See all articles