ChatGPT助我學習之[js-async/await]

這次提問涉及了詢問用法，追問疑惑，確認掌握～

詢問

js sync await  給我講一下，還是有些迷惑

#在JavaScript 中，我們經常需要處理非同步任務，例如從伺服器取得資料、傳送資料給伺服器等。傳統的方式是使用回調函數來處理非同步任務，這在多層嵌套時會導致回調地獄，程式碼難以維護和調試。為了解決這個問題，JavaScript 引入了 Promise 和 async/await 兩種方式來處理非同步任務。

其中，async/await 是 ES8 中新增的語法糖，可以更簡單、直觀地處理非同步任務。關於async/await 你可以從以下幾點來理解：

1. async 函數是一個傳回Promise 物件的非同步函數，可以使用await 關鍵字等待非同步操作的結果，在等待的過程中async 函數會釋放CPU，讓其他任務可以執行。

2. await 關鍵字只能在async 函數中使用，可以等待一個Promise 物件的結果，如果Promise 物件變成resolved 狀態，則await 表達式的值為Promise 傳回的結果；如果Promise 物件變成rejected 狀態，則會拋出錯誤並被try-catch 區塊捕獲。

3. async 函數內部可以有多個 await 表達式，它們之間是順序執行的，後面的 await 表達式需要等待前面的 await 表達式完成後再執行。

4. 使用 async/await 可以將非同步程式碼寫成類似同步程式碼的形式，程式碼更易於理解，也更容易調試和維護。

下面是使用async/await 處理非同步任務的範例：

async function getData() {
  try {
    const result1 = await fetch('/api/data1'); // 等待获取数据1
    const result2 = await fetch('/api/data2'); // 等待获取数据2
    return [result1, result2]; // 返回获取的数据
  } catch (error) {
    console.error(error); // 捕获错误并输出到控制台
  }
}

getData().then(data => {
  console.log(data); // 输出获取的数据
});

在上面的例子中，getData 函數使用async 關鍵字聲明，並在函數內部使用await 關鍵字等待非同步操作的結果，這裡使用了兩個await 表達式分別取得不同的資料。在本範例中，最終傳回兩個非同步操作的結果數組，如果發生異常，將會被 try-catch 區塊捕獲並輸出錯誤訊息。最後，我們透過呼叫 getData() 方法來取得非同步數據，並且在傳回結果後輸出資料到控制台。

提出疑惑

我覺得很迷惑await 是為了等待對應的非同步函數，那麼為什麼要在使用await的函數上加async呢

非常好的問題！答案是：因為 await 關鍵字只能在 async 函式中使用。

使用非同步函數取得非同步任務的結果時，我們需要將其放置在一個 async 函數內部，然後使用 await 等待非同步操作的結果。因此，若想使用 await 關鍵字，必須將函數宣告為 async 函數。反之，如果沒有使用 async 函數，就不能在該函數中使用 await。

換句話說，只有當一個函數被宣告為 async 函數時，函數才能夠包含 await 關鍵字，這也是 async/await 語法的基本前提。宣告函數為 async 是告訴 JS 引擎該函數執行可能會傳回 Promise，讓 JS 引擎在執行函數時進行特殊的處理。

要注意的是，使用await 來等待非同步任務的結果並不一定要在函數內部立即返回Promise 對象，因為await 關鍵字的執行過程與Promise 鍊式呼叫的執行過程類似，也會自動建立並傳回Promise 物件。

總的來說，async 和 await 是構成 Promise 非同步程式設計風格的語法糖，它們讓非同步程式碼更直觀和易讀，使得我們可以使用同步風格的程式碼書寫和處理非同步操作的程式碼。

確認了解

喔哦實際上 async 這個標記並沒有對function進行改造對吧。我原來的時候認為這個標記會把一個函數變成非同步函數執行

你說得很好！事實上，async 關鍵字並不會直接將一個函數變成非同步函數執行。它只是告訴 JavaScript 引擎，該函數內部可能有非同步操作，並且在使用 await 關鍵字時可能需要暫停函數的執行。

換句話說，async 關鍵字並沒有改造該函數的本質，而是提供了一種更方便的方式來處理非同步操作。當 async 函數被呼叫時，它會傳回一個 Promise 對象，並且 async 函數內部的程式碼在執行時會自動封裝為 Promise 物件的 resolve 方法。當在 async 函數內部使用 await 關鍵字等待非同步操作完成後，函數將會暫停執行，直到非同步操作傳回結果或拋出錯誤。

另外，需要注意的是，在async 函數內部使用return 語句傳回值時，傳回的值會被Promise.resolve() 包裝成一個Promise 對象，而該Promise 物件的值就是return 語句傳回的值。如果 async 函數內部拋出異常，則會被 Promise.reject() 包裝成 Promise 對象，並傳回給呼叫者。

因此，我們可以將 async/await 與 Promise 風格的程式碼結合使用，以建立更簡單、直覺的非同步程式設計模型。

進一步確認知識點

所以 async 是處理非同步操作的表示，而不是創造非同步操作的語法

沒錯，你的理解非常準確。 async 是一種處理非同步操作的表示，而不是創造非同步操作的語法。

實際上，JavaScript 已經擁有了一些用來處理非同步操作的機制，如 setTimeout、XMLHttpRequest 和 fetch 等。這些機制都是基於事件循環 (event loop) 的非同步程式設計模型，並且被廣泛應用於各種 JavaScript 應用中。

然而，這些機制存在一些問題，如回調地獄和程式碼可讀性差等。為了解決這些問題，Promise 和 async/await 作為一種新的非同步程式設計方式被引入，並較快地得到了廣泛的應用。

在這個過程中，async 函數則扮演了處理非同步操作的重要角色。它提供了更直觀、易於理解的程式碼形式，並使得 JavaScript 開發者能夠更好地掌握非同步程式設計技術。因此，我們可以將 async 函數視為 Promise 風格的程式碼模型的補充，以實現更靈活和高效的非同步程式設計。

---

很好的詢問~                                  

以上是ChatGPT助我學習之[js-async/await]的詳細內容。更多資訊請關注PHP中文網其他相關文章！