面試考題 2024 - Promise vs Async/Await 的關係
===


---
###### tags: `面試問題`, `練習問題`, `2024`

看過英文和中文版本的解說，發現英文版本的解說比較人性比較舒服。

> A promise is an assurance or guarantee that something will happen in the future. In JavaScript, a Promise is an object that will produce a single value some time in the future.


意思是說，Promise 是一個承諾，承諾說未來一定會完成的。我覺得挺浪漫的。
反倒中文版本的呢，就比較生硬一些：

在JavaScript裡， **Promise 是一種用於 異步計算 的對象。**
它代表了一個最終可能完成或失敗的操作和其結果值。使用 Promise 可以讓你阻止異步代碼，讓程式知道不需要等你的結果才render 結果，可以先預先運作不修改的部分，等異步完成再做統計和顯現結果。這樣可以有效避免異步操作中常見的 **回調地獄（Callback Hell）**

這裡也可以參考 Eventloop 的運作流程，因為其中流程可以有效地說明流程中什麼部分進行Promise，Promise最終回到哪裡做運算等。

### 特點：
1. 狀態：
- 一個 **Promise** 對象具有三種狀態： pending（等待中），fulfilled（已實現） 和 rejected（已拒絕）。

2. 不可變性：
- 一旦 **promise** 的狀態改變（從 pending 到 fulfilled 或 rejected），它的狀態將永遠不會再變。

3. 鏈式調用：
- **promise** 提供了 **then** 和 **catch** 方法來處理 fulfilled 或 rejected 狀態的結果。 這些方法返回新的Promise，允許進行鏈式調用。

---
## Async/Await

**async/await 是建立在Promise上的語法糖**。它允許你以更直觀的方式使用 promise，使異步代碼看起來和普通的同步代碼類似。

（這圖其實是Eventloop機制，但裡面有提到把東西放進callback queqe，promise就類似這樣。）

### 特點 ：

1. 簡潔性：
- **async/await** 讓異步代碼的編寫更加簡潔，提高了代碼的可讀性。

2. 錯誤處理：
- 可以使用傳統的**try-catch** 語句來捕獲異步代碼中的錯誤，這比使用 **promise 的 .catch()** 更加直觀。

3. 同步流控制：

- **await** 關鍵字可以“**暫停**” **async** 函數的執行，等待promise解決，然後繼續執行下一行代碼。

## Promise 和 async/await 的差異

1. 語法和可讀性：
- **Promise** 通常需要使用 .**then()** 和 .**catch()** 方法來處理異步結果，這可能導致代碼多層嵌套，尤其是在處理多個依賴的異步操作時。
- **async/await** 提供了一種更加簡潔和直觀的方式來處理異步操作，讓代碼看起來更像是同步的，**減少了嵌套，並改善了可讀性**。

2. 錯誤處理：
- 使用 **promise** 時，錯誤需要通過 .**catch()** 方法來捕獲
- 使用 **async/await** 時，可以直接用 **try-catch** 語句來處理異步操作中的錯誤，這使得錯誤處理與同步代碼的錯誤處理更為一致。

3. 控制流：
- **Promise** 的鏈式調用有時可以使得流程控制**變得不這麼直觀**，特別是在需要更多個條件分支或循環時。
- **async/await** 可以使用標準的控制流語句（**如 if-else, for 循環**），使得異步代碼的流程控制更為**自然和簡單**。

## 總結：

簡單來說呢， async/await 提供了一種**更加簡潔和易於理解**的方式來使用 Promise ，特別是當處理複雜的異步流程時，然而， async/await 依然依賴於 Promise 作為其運作機制的基礎，**因此兩者並不是相互獨立的，而是互相補充**。
它是很簡單的東東，但考試都會問，所以還是了解下吧，面試加油咯！peace