上一篇使用setTimeout()和回呼函式處理需要等待的工作。Promise也是用來處理稍後才會得到的結果,不過它會記錄這項工作目前正在等待、已經成功,還是已經失敗。
Promise有三種狀態。pending代表工作還在進行,目前沒有成功結果,也還沒有失敗原因。fulfilled代表工作成功完成,並且得到一個結果;rejected則代表工作失敗,並且得到失敗原因。
先建立一個等待一秒後成功的 Promise:
const successPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("讀取完成");
}, 1000);
});


new Promise()會收到一個函式,Promise建立時會把resolve和reject兩個函式傳進來。計時器還沒結束時,successPromise處於pending,因為結果還在等待。
一秒後執行resolve("課程讀取完成"),代表工作成功,Promise便會從pending變成fulfilled。傳給resolve()的文字就是成功結果,可以使用then()取得:
successPromise.then((message) => {
console.log("成功:", message);
});

這裡的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);
});

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 完成。