Promise

  • promise可封裝函式,執行後可取得執行狀態,並回傳被封裝函式的結果。

  • 通過鏈式調用,可依序執行函式,簡化多層的callback帶來的複雜性。

  • Promise處理的事項多半來自外部,所以會藉由回傳結果來進行下一步的動作。

  • 在ES6 Promise標準中,實作內容只有一個建構函式與一個then方法、一個catch方法,再加上四個必需以Promise關鍵字呼叫的API,Promise.resolve、Promise.reject、Promise.all、Promise.race。

  • Promise物件最後的結果要不然就用一個回傳值來fulfilled(實現),要不然就用一個理由(錯誤)來rejected(拒絕)。

fetch使用Promise架構,只有在網路連線發生問題才會轉為rejected(拒絕)狀態,只要是伺服器有回應都算已實現狀態。

  • promise物件必定是以下三種狀態中的其中一種: pending(等待中)、fulfilled(已實現)或rejected(已拒絕)。

//-----Promise語法結構如下:------
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true; // 模擬成功或失敗
    if (success) {
      resolve("操作成功!");
    } else {
      reject("操作失敗...");
    }
  }, 2000);
});

myPromise
  .then((message) => {
    console.log("成功:", message);
  })
  .catch((error) => {
    console.log("失敗:", error);
  })
  .finally(() => {
    console.log("操作結束");
  });
  • Promise.all() 等待多個 Promise 完成

const promise1 = new Promise((resolve) => setTimeout(() => resolve("A 完成"), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve("B 完成"), 2000));
const promise3 = new Promise((resolve) => setTimeout(() => resolve("C 完成"), 3000));

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log("所有 Promise 完成:", values);
});

Last updated

Was this helpful?