首頁 > web前端 > js教程 > JavaScript 中的 Promise

JavaScript 中的 Promise

Barbara Streisand
發布: 2024-10-20 14:34:02
原創
520 人瀏覽過

承諾

代表一個值,可能現在可用,或將來可用,或永遠不可用。
Promise 生命週期:

  • 待處理:功能開始運作。

  • 已完成:操作成功完成,我們有一個結果值。

  • 已拒絕:操作失敗,我們有一個錯誤物件。

Promise 的語法:

使用新的 Promise 建構函式建立 Promise,該建構函式採用帶有兩個參數的函式:resolve 和reject。

Promise in Javascript
在程式碼片段中,我們有一個名為 getUser 的函數,它會傳回一個新的 Promise(一個具有處理非同步操作方法的 Promise 物件)。

在 Promise 建構函數中,我們有一個 setTimeout 函數,用於模擬非同步操作,例如從資料庫中取得資料。 Promise 有兩個關鍵方法傳遞給它:

  • resolve:操作成功時呼叫。在本例中,如果 id === 1,則傳回一個模擬使用者物件 { id: 1, name: "Diana", email: "Diana@test.com" }.

  • reject:操作失敗時呼叫。如果 id 不為 1,則 Promise 將被拒絕,並顯示錯誤訊息「找不到使用者...」。

resolve 和reject 函數的作用類似於promise 上下文中的return 語句,允許呼叫者處理操作的成功或失敗。

連結承諾

Promise 可以連結起來,讓您可以按順序執行一系列非同步操作:

Promise in Javascript

在此範例中,我們連結多個 Promise 來模擬逐步取得資料。

  • 首先,我們呼叫 getUser(1) 來取得使用者資料。如果有效,我們將進入下一步。

  • 其次,我們取得 user.id 並透過呼叫 getOrders(user.id) 使用它來取得該使用者的訂單。

-第三,我們從清單中選擇第二個訂單 (orders[1]) 並使用 getOrderDetails(orders[1]) 來取得其詳細資訊。

如果任何時候出現任何問題(例如找不到使用者或訂單遺失),錯誤將在 .catch() 區塊中捕獲並顯示。

簡單細分:

  • 您請求一個使用者。
  • 如果您找到用戶,則可以詢問他們的訂單。
  • 如果您收到訂單,請詢問其中一份訂單的詳細資訊。
  • 如果出現任何問題(例如未找到使用者或訂單), - 它將顯示錯誤。

結果:

Promise in Javascript

這種方法可以更輕鬆地以乾淨、逐步的方式處理非同步任務,而不是使用混亂的程式碼。

承諾方法:

Promise.all():並行執行多個 Promise 並等待所有承諾都解決。

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results);  // Array of all fulfilled values
  });

登入後複製

範例:

Promise in Javascript

(我建議閱讀此方法並將其與回調進行比較)

以上是JavaScript 中的 Promise的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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