理解 JavaScript 中的 Promise 與 Callback

認證測驗的關鍵問題和解答

1. 什麼是回呼函數，它與常規函數有何不同？

   • 回呼函數作為參數傳遞給另一個函數並被呼叫以處理非同步操作。與常規函數不同，回呼被設計為在完成某個任務後執行。

2. 與回呼相比，Promise 如何提高程式碼可讀性並管理非同步操作？

   • Promise 允許連結和更好的錯誤處理，從而產生更具可讀性和可維護性的程式碼。它們有助於避免被稱為“回調地獄”的深層嵌套結構。

3. Promise 的主要狀態是什麼，它們如何在這些狀態之間轉換？

   • 主要狀態有：Pending（初始狀態）、Fulfilled（操作成功完成）、Rejected（操作失敗）。 Promise 從 Pending 轉換為 Fulfilled 或 Rejected。

4. 如何使用 Promises 處理錯誤，這與使用回呼的錯誤處理相比如何？

   • Promises 提供了一個 catch 方法來以簡化的方式處理錯誤，而使用回調進行錯誤處理通常需要傳遞錯誤物件並在嵌套回呼中進行多次檢查。

5. Promise.all 和 Promise.race 有什麼區別，什麼時候使用它們？

   • Promise.all 在所有輸入 Promise 解析時解析，這使得它對等待多個非同步操作完成非常有用。一旦其中一個輸入 Promise 解析，Promise.race 就會解析，這對於需要第一個完成的操作結果的場景很有用。

6. async/await 語法如何簡化 Promises 的使用，以及使用 wait 的規則是什麼？

   • async/await 語法允許以同步方式編寫非同步程式碼，提高可讀性。 wait 只能在非同步函數內部使用，並暫停執行直到 Promise 解析。

介紹

在 JavaScript 不斷發展的環境中，有效管理非同步操作是建立高效能 Web 應用程式的關鍵。雖然回調是最初的方法，但 Promises 引入了一種更結構化和可讀的方法來處理非同步任務。本部落格深入探討了使用 Promise 與回呼的複雜性，假設您已經對這些概念有基本的了解。

Promise 相對於回調的好處

提高可讀性和可維護性

回調雖然有效，但通常會導致稱為「回調地獄」的深層嵌套結構，使程式碼難以閱讀和維護。

回調地獄的例子：

fetchData(function(response1) {
  fetchMoreData(response1, function(response2) {
    fetchEvenMoreData(response2, function(response3) {
      console.log(response3);
    });
  });
});

透過 Promise 進行改進：

fetchData()
  .then(response1 => fetchMoreData(response1))
  .then(response2 => fetchEvenMoreData(response2))
  .then(response3 => console.log(response3))
  .catch(error => console.error(error));

錯誤處理

使用回調，錯誤處理可能會變得很麻煩，因為您需要傳遞錯誤物件並在每個層級處理它們。

使用回調處理錯誤：

function fetchData(callback) {
  setTimeout(() => {
    if (/* error condition */) {
      callback(new Error('An error occurred'), null);
    } else {
      callback(null, 'data');
    }
  }, 1000);
}

fetchData((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

使用 Promise 進行錯誤處理：

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (/* error condition */) {
        reject(new Error('An error occurred'));
      } else {
        resolve('data');
      }
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

高級 Promise 方法

Promise.all

當您需要等待多個非同步操作完成後再繼續操作時，Promise.all 非常有用。

例子：

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [3, 42, "foo"]
});

Promise.race

當您需要最快操作的結果時，Promise.race 很有用。

例子：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(value => {
  console.log(value); // "two"
});

使用 async/await 簡化非同步程式碼

async/await 語法可讓您編寫看起來同步的非同步程式碼，增強可讀性並降低連結 Promise 的複雜性。

例子：

async function fetchData() {
  return 'data';
}

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

processData();

結論

雖然回調為 JavaScript 中處理非同步操作奠定了基礎，但 Promise 顯著提高了非同步程式碼的可讀性、可維護性和錯誤處理能力。了解如何以及何時有效地使用這些工具對於現代 JavaScript 開發至關重要。借助 Promises 和 async/await 語法，開發人員可以編寫更清晰、更易於管理的程式碼，為更強大的應用程式鋪平道路。