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

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

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

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]刪除
最新教學 更多>

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

Copyright© 2022 湘ICP备2022001581号-3