」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 這並不難!理解 JavaScript 中的“Promise”

這並不難!理解 JavaScript 中的“Promise”

發佈於2024-11-01
瀏覽:849

It’s not that hard! To understand `Promise` in javascript

這篇文章的內容非常適合Javascript初學者。將以簡單易懂的語言進行描述,您不用擔心看不懂。

承諾,你為何存在?

Promise是學習現代Javascript語言中不可或缺的知識點。很多人讀的時候都感到很困惑。主要原因可以用一句話概括:

代碼不再從上到下執行。

一般情況下,我們寫的程式碼都是順序執行的,例如我們寫一段從1數到3的程式碼。

console.log(1)
console.log(2)
console.log(3)

依F12開啟我們瀏覽器的控制台,將上面的程式碼複製進去,回車,可以看到數字1到3按順序印出來了。

1
2
3

現在,如果我們有一個要求,程式碼的順序不能改變,但最終列印輸出的順序必須與程式碼的順序無關,可以這樣做嗎?

我們想像一下,如果1、2、3分別由三個人印,那就非常簡單了。我們只需要告訴他們同時列印數字的任務即可,列印輸出的順序只與任務的執行時間有關。

承諾,神奇功效

那麼,我們要如何將列印任務分配給三個人呢?這就是使用Promise的地方。透過建立一個新的 Promise 對象,我們可以將一段程式碼分配給一個新的“進程”,而不是在目前的“進程”上執行。請注意,這裡的「進程」和我們常說的作業系統進程並不一樣,而只是一個抽象概念,代表一個依序執行程式碼的虛擬單元。

承諾、組裝說明

剛才我們說了,Promise它可以看作是一個新的“進程”,所以如果我們想讓它執行任何程式碼,我們可以將它包裝在一個函數中交給它。這樣程式碼就不會立即執行。

Promise也為我們提供了兩個函數,一個是resolve,一個是reject,我們可以分別在任務完成和失敗時呼叫。這兩個函數作為參數傳遞給Promise的內部。所以,我們可以這樣組裝:

Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(1)
      resolve()
    }, 300)
  }
)

這裡我們使用setTimeout來模擬一個耗時的任務。在實際場景中,此任務可能是讀取檔案、請求網路介面或等待使用者輸入。當任務完成後,我們呼叫resolve函數來表示任務已經完成。

完整程式碼

然後,我們按照同樣的方法,Promise在組裝另外兩個的時候,只需要向他們提供不同的打印數量和任務所需的時間即可。最後,完整的程式碼是這樣的,你可以嘗試複製到控制台試試。

Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(1)
      resolve()
    }, 300)
  }
)
new Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(2)
      resolve()
    }, 200)
  }
)
new Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(3)
      resolve()
    }, 100)
  }
)

最後,數位列印的順序與任務的執行時間有關:

3
2
1

Promise、並發模型

並發程式設計是關於如何在有限數量的CPU核心上模擬大量任務同時執行。 Javascript中的Promise提供了一種方便快速的並發程式設計方式,以及一套處理回傳值和錯誤值的規格。在了解並熟悉這個規範後,我們可以大幅提高處理並發任務的效率。

版本聲明 本文轉載於:https://dev.to/linjiezhang/its-not-that-hard-to-understand-promise-in-javascript-3kk3?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 你真的了解Git嗎?
    你真的了解Git嗎?
    本部落格中的圖片來自 Scott Chacon、Ben Straub 的「Pro Git」 在本部落格中,您將了解有關您在程式設計中使用的 Git 中的一些日常功能的各種精彩事實! 開發人員很容易盲目使用工具而不知道它們在幕後是如何工作的。雖然這種抽像是為了更好,但了解事物如何運作有時可能是經驗...
    程式設計 發佈於2024-11-07
  • 濃縮咖啡;出發時間到了
    濃縮咖啡;出發時間到了
    在過去的兩周里,我用 Go 重寫了我的基於 Rust 的 Java 構建工具,事情進展得更快。 Espresso 運作速度更快且更便攜。 Espresso 最近也能夠編譯和打包它的第一個項目,即我的另一個項目 Kindling。 我希望能得到任何關於 Espresso 的回饋。有很多功能缺失,例如...
    程式設計 發佈於2024-11-07
  • 為什麼我的 JSFiddle 無法運作?
    為什麼我的 JSFiddle 無法運作?
    調試無功能的 JSFiddle嘗試在 JSFiddle 中執行簡約程式碼片段時,使用者可能會遇到意外的功能缺失。此問題通常是由於 JavaScript 設定中的疏忽而引起的。若要解決此問題,請依照下列步驟操作:在 JavaScript 設定中找到「載入類型」下拉清單。 選擇「無換行 - 底部」。 ...
    程式設計 發佈於2024-11-07
  • GenAI Git 提交
    GenAI Git 提交
    產生 git 提交訊息很快就成為開發人員的經典 GenAI 應用程式。 為了解決這個問題,我們將製作一個 GenAIScript 腳本。 此腳本可作為常規 Node.js 自動化腳本並使用 runPrompt 向 LLM 發出呼叫並要求使用者確認產生的文字。 ? 解釋腳本 腳本...
    程式設計 發佈於2024-11-07
  • 什麼是 Webhook 以及如何有效使用它們
    什麼是 Webhook 以及如何有效使用它們
    Webhooks 是集成不同系统并实时发送通知的强大工具。它们允许一个应用程序在事件发生时自动通知另一个应用程序,而无需像传统 API 那样不断发出请求来检查是否有新内容。在这篇文章中,我们将了解它们的工作原理、如何配置它们,并且我们将探索使用 Webhook.site 工具的实际示例,该工具有助...
    程式設計 發佈於2024-11-07
  • 建立 JS 函數以刪除給定字串中的空格。 (使用核心js而不是內建的修剪功能。)
    建立 JS 函數以刪除給定字串中的空格。 (使用核心js而不是內建的修剪功能。)
    const trim = (string) => { let strArr = string.split(""); let trimedStr = []; strArr.forEach((item) => { if (item !== " ") { ...
    程式設計 發佈於2024-11-07
  • GlobalErrorHandler:捕捉從 ErrorBoundary 手中落下的錯誤!
    GlobalErrorHandler:捕捉從 ErrorBoundary 手中落下的錯誤!
    ErrorBoundary 是一個出色的工具,可以捕捉 React 元件拋出的錯誤。您可以根據錯誤本身的性質和位置提供自訂錯誤訊息。但並非所有拋出的錯誤都由 ErrorBoundary 處理!你用這些做什麼? 當考慮非同步錯誤和從 React 外部拋出的錯誤時,ErrorBoundary 不夠。為...
    程式設計 發佈於2024-11-07
  • 如何在Visual Studio 2008中設定可執行檔圖示?
    如何在Visual Studio 2008中設定可執行檔圖示?
    在Visual Studio 2008 中設定可執行檔圖示雖然提供的參考主要針對Visual Studio 2010,但在Visual Studio 中設定可執行檔圖示的原則Studio 2008 基本上都適用。但是,需要記住一些具體的注意事項:使用.ico 檔案您必須為可執行圖示使用.ico 檔案...
    程式設計 發佈於2024-11-07
  • 導入大型 SQL 檔案:為什麼要使用 MySQL 控制台而不是 phpMyAdmin?
    導入大型 SQL 檔案:為什麼要使用 MySQL 控制台而不是 phpMyAdmin?
    在 phpMyAdmin 中匯入大型 SQL 檔案:另一種方法嘗試直接透過 phpMyAdmin 匯入大量 SQL 檔案可能會遇到限制。不過,有一個可靠的替代方法,就是利用 MySQL 控制台。 根據提供的建議,透​​過 MySQL 控制台匯入 SQL 檔案可以繞過 phpMyAdmin 中遇到的問...
    程式設計 發佈於2024-11-07
  • 使用 JSON-LD 提升部落格的 SEO:我如何使用結構化資料添加豐富的結果
    使用 JSON-LD 提升部落格的 SEO:我如何使用結構化資料添加豐富的結果
    Introduction A few years ago in 2022, I attended SCaLE 19x. For those who are not aware, SCaLE is an acronym which stands for Southern Califo...
    程式設計 發佈於2024-11-07
  • create-next-app 使用此套件驗證您的應用程式名稱
    create-next-app 使用此套件驗證您的應用程式名稱
    在本文中,我們分析 create-next-app 如何驗證您的專案名稱。 validate: (name) => { const validation = validateNpmName(basename(resolve(name))) if (validation.valid) { ...
    程式設計 發佈於2024-11-07
  • 幕後反應:到底發生了什麼事?
    幕後反應:到底發生了什麼事?
    React 長期以來一直是首選的 JavaScript 函式庫,並且很容易成為世界上最受歡迎的函式庫之一。此外,隨著 Next.js 和 Remix 等流行框架建立在 React 之上,以及使用 React-Native 進行行動開發的能力,這個函式庫不會很快消失。然而,這樣做的問題是,大多數初學者...
    程式設計 發佈於2024-11-07
  • 使用 Tinder Unblur 個人資料
    使用 Tinder Unblur 個人資料
    Tinder 取消模糊程式碼說明 以下 JavaScript 程式碼是一個腳本,旨在對「喜歡你」部分中的 Tinder 照片進行取消模糊處理。它的工作原理是從 Tinder 的 API 獲取預告圖像並動態更新 DOM 以用清晰的圖像替換模糊的圖像。 async function ...
    程式設計 發佈於2024-11-07
  • 如何確保網站安全:最佳實踐和見解
    如何確保網站安全:最佳實踐和見解
    在當今的數位時代,確保網站的安全至關重要。隨著網路威脅變得越來越複雜,保護您的網站免受潛在漏洞的影響至關重要。以下是增強網站安全性的一些關鍵做法,以及特定網站 HouseOfParty.com 如何在其利基市場中舉例說明安全做法。 使用 HTTPS 描述:HTTPS(安全超文本傳輸協定)會對使用者...
    程式設計 發佈於2024-11-07
  • 如何使用「adjustText」函式庫解決 matplotlib 圖中註解重疊的問題?
    如何使用「adjustText」函式庫解決 matplotlib 圖中註解重疊的問題?
    Matplotlib 中的重疊註釋:綜合解決方案在資料視覺化領域,經常會遇到重疊註釋的問題,其中文字標籤彼此模糊,導致難以解釋圖表。為了應對這項挑戰,人們提出了各種方法,但對於像線重疊的複雜圖形,找到合適的解決方案可能很困難。這篇文章提出了一個使用「adjustText」函式庫的全面解決方案,提供了...
    程式設計 發佈於2024-11-07

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3