iT邦幫忙

2026 iThome 鐵人賽

DAY 26
0

上一篇使用setTimeout()和回呼函式處理需要等待的工作。Promise也是用來處理稍後才會得到的結果,不過它會記錄這項工作目前正在等待、已經成功,還是已經失敗。

Promise有三種狀態。pending代表工作還在進行,目前沒有成功結果,也還沒有失敗原因。fulfilled代表工作成功完成,並且得到一個結果;rejected則代表工作失敗,並且得到失敗原因。

先建立一個等待一秒後成功的 Promise:

const successPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("讀取完成");
  }, 1000);
});

https://ithelp.ithome.com.tw/upload/images/20261010/201786963iuwyi4bvT.png
https://ithelp.ithome.com.tw/upload/images/20261010/20178696vBR39mVjss.png

new Promise()會收到一個函式,Promise建立時會把resolve和reject兩個函式傳進來。計時器還沒結束時,successPromise處於pending,因為結果還在等待。

一秒後執行resolve("課程讀取完成"),代表工作成功,Promise便會從pending變成fulfilled。傳給resolve()的文字就是成功結果,可以使用then()取得:

successPromise.then((message) => {
  console.log("成功:", message);
});

https://ithelp.ithome.com.tw/upload/images/20261010/201786967Vq8OqX9k5.png

這裡的message會是「課程讀取完成」。then()不會在 Promise 還是pending時立刻取得結果,而是等它變成fulfilled後再執行。

接著建立一個失敗的 Promise:

const failedPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error("讀取失敗"));
  }, 1000);
});

這次一秒後呼叫的是reject(),代表工作沒有成功,Promise會從pending變成rejected。傳入的Error保存失敗原因,可以使用catch()取得:


failedPromise.catch((error) => {
  console.log("失敗:", error.message);
});

https://ithelp.ithome.com.tw/upload/images/20261010/201786969Gghd24SPd.png

then()處理成功結果,catch()處理失敗原因。如果不論成功或失敗都要執行一段程式,可以使用finally():

successPromise
  .then((message) => console.log(message))
  .catch((error) => console.log(error.message))
  .finally(() => console.log("處理結束"));

Promise一旦從pending變成fulfilled或rejected,狀態就不會再改變。成功和失敗合稱為已完成狀態,代表這項工作已經有最後結果。下一篇會使用async和await,用另一種寫法等待 Promise 完成。
https://ithelp.ithome.com.tw/upload/images/20261010/20178696MroMFTQlsg.png


上一篇
Day25 同步
系列文
從頭開始的Javascript學習之旅 共 26 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言