JavaScript - Promise
| 2025-3-27
字數 942閱讀時間 3 分鐘

前言

💡
是用來改善 JavaScript 中非同步部分的語法結構
由於 javascript 是屬於同步執行的程式語言,代表一次只能做一件事情,
所以遇到需要使用非同步的事情時,js 就會將該事件移到程式碼的最後方,
等到所有的原始碼運行完才會執行非同步的事件。
 
範例: (非同步事件處理)
 
主控台輸出如下:
notion image
 
那非同步事件都移到程式碼的最後執行的話,
如果今天執行同步的程式碼,需要使用到非同步事件的某些參數呢?
notion image
可以看到,參數抓取並不會抓到非同步處理的部分,
因為非同步事件被移到程式碼最後來執行。
 
所以今天我們要使用這些非同步事件時,傳統的做法會使用 callback function
callback function :把函式當成另一個函式的參數,透過另一個函式來呼叫
運作順序 ⇒ doFirst ,印出一 ,doLater ,印出二
notion image
但如果 非同步事件多的話就回形成 callback hell ,難以維護,如下:
notion image
 
所以為了改善這種情況,Promise 就出現了!

定義

💡
Promise 物件代表一個即將完成、或失敗的非同步操作,以及它所產生的值。
所以說 Promise 物件代表,再進行非同步請求時,成功取得的資料或失敗的資料
而在Promise 有以下狀態:
  • pending : 事件已經運行中,尚未取得結果
  • resolved:事件已經執行完畢且成功操作,回傳 resolve的結果(該承諾已經被實現 fulfilled)完成
  • rejected:事件已經執行完畢但操作失敗,回傳 rejected的結果
所以我們在進行非同步事件時,可以變成以下:
notion image

用法

Promise 是一種建構函式,提供以下方法:
  • Promise.all
  • Promise.race
  • Promise.resolve
  • Promise.reject
 
而Promise 建構函式在建立同時,必須傳入一個韓式作為參數,而此函式必須包含resolve, reject
 
而使用 Promise 所建構( new )出來的物件,則可以使用其中的原型方法
 
而 all() 跟 race() 方式則可以載入多個 promise 事件
  • race() 僅回傳第一個完成的事件
  • all () 會同時執行以下 Promise ,並在全部完成後統一,回傳陣列
    • 有一個失敗,整個promise 被判定失敗
notion image

範例:

 
輸出:
notion image
 
Loading...