認識 JavaScript 的 Promise 與 async 和 await 機制

2024-05-01 14:39:22

在JavaScript中，Promise 是一種用於處理非同步操作的機制。它表示一個將來可能完成或失敗的操作和其結果值。簡單來說，Promise 是一個代表非同步操作最終完成或失敗的容器。

Promise 有三種狀態：

待定（Pending）：初始狀態，非同步操作尚未完成也未失敗。
已實現（Fulfilled）：表示相關的非同步操作成功完成。
已拒絕（Rejected）：表示相關的非同步操作失敗。

一旦Promise 從待定狀態變為已實現或已拒絕，它就會保持該狀態，不會再改變。

創建 Promise

你可以使用 Promise 的建構函式來創建一個新的 Promise 對象。建構函式接受一個執行器函式作為參數，這個函式接受兩個參數：resolve 和 reject。這兩個參數也是函式，用於改變 Promise 的狀態：

let promise = new Promise((resolve, reject) => {
    // 進行一些非同步操作
    if (/* 操作成功 */) {
        resolve(value);  // 成功時呼叫，將 Promise 狀態改為已實現
    } else {
        reject(error);  // 失敗時呼叫，將 Promise 狀態改為已拒絕
    }
});

用範例來說明，先準備兩個函式：

function successCallback(result) {
  console.log("It succeeded with " + result);
}

function failureCallback(error) {
  console.log("It failed with " + error);
}

使用 promise

let promise = doSomething();
promise.then(successCallback, failureCallback);

//簡寫：
doSomething().then(successCallback, failureCallback);

串連

有個常見的需求是依序呼叫兩個以上的非同步函式，我們稱之為建立 Promise 鏈。

傳統使用 callback function

doSomething(function (result) {
  doSomethingElse(
    result,
    function (newResult) {
      doThirdThing(
        newResult,
        function (finalResult) {
          console.log("Got the final result: " + finalResult);
        },
        failureCallback,
      );
    },
    failureCallback,
  );
}, failureCallback);

俗稱 callback hell

使用 promise

doSomething()
  .then(function (result) {
    return doSomethingElse(result);
  })
  .then(function (newResult) {
    return doThirdThing(newResult);
  })
  .then(function (finalResult) {
    console.log("Got the final result: " + finalResult);
  })
  .catch(failureCallback);

arrow function 寫法

doSomething()
  .then((result) => doSomethingElse(result))
  .then((newResult) => doThirdThing(newResult))
  .then((finalResult) => {
    console.log(`Got the final result: ${finalResult}`);
  })
  .catch(failureCallback);

一般我們在存取外部 api 時都會很常見到 promise，這邊是使用 axios 實作的範例：

axios.post('https://api.example.com/posts', {
  title: 'New Post',
  content: 'This is the content of the post.'
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

async 與 await

在 JavaScript 中，async 和 await 是用來處理非同步操作的一種寫法，它讓你用起來像是同步代碼那樣簡潔明瞭。這種語法主要用於簡化使用 Promises 的非同步操作，使程式碼更加清晰易懂。

async 是一個放在函式前的關鍵字，用來表明該函式是非同步的。這意味著這個函式將回傳一個 Promise。如果函式正常結束，返回值將用作 Promise 的 resolve 值；如果函式拋出錯誤，它會自動被 reject。

例如：

async function fetchData() {
    return 'Data loaded';
}

這個函式回傳一個解析為 'Data loaded' 的 Promise。

await 只能在 async 函式內部使用。它會暫停當前函式的執行，等待 Promise 解析完畢，然後繼續執行函式並回傳解析結果。這讓非同步程式碼看起來和同步程式碼相似。

async function showData() {
    const data = await fetchData();  // 等待 fetchData 函式的 Promise 解析完畢
    console.log(data);               // 輸出：Data loaded
}

在這裡，await 讓我們在主控台 console 出內容前，確保 fetchData 函數回傳的 Promise 已經解析完成。

實際範例：

async function createPost() {
    try {
        const response = await axios.post('https://api.example.com/posts', {
            title: 'New Post',
            content: 'This is the content of the post.'
        });
        console.log(response.data); // 輸出響應數據
    } catch (error) {
        console.error(error); // 處理錯誤
    }
}

createPost();

使用場景

網路請求
處理文件I/O
執行任何包含等待操作完成的任務，如資料庫操作或呼叫API

應用在 try catch

async function loadData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

如果 fetchData 函式拋出錯誤，await 會將其捕獲，並在 catch 中處理。

總之，async 和 await 提供了一種更加直覺和簡潔的方法來處理 JavaScript 中的非同步操作，使程式碼的可讀性和維護性大大提高。