JavaScript - 非同步/等待

上一頁
下一頁

使用async/await關鍵字定義的 JavaScript 函式可以執行與 Promise 相同的任務，但程式碼行數更少，並且使程式碼更易讀。Promise 的語法有點複雜，因此引入了 async/await 語法。

要使用 async/await，我們首先需要定義一個 async 函式。為此，我們在函式定義之前編寫 async。async 函式返回一個 Promise。await 關鍵字僅在 async 函式內部使用。await 關鍵字使 JavaScript 等待 Promise 解析，然後繼續執行函式。

讓我們分別詳細瞭解 async/await 關鍵字 -

JavaScript Async 關鍵字

使用 async 關鍵字定義的 JavaScript 函式稱為非同步函式。async 函式允許你生成非同步程式碼。

它始終返回 Promise。如果你沒有手動返回 Promise 並返回資料、字串、數字等，它會建立一個新的 Promise 並使用返回值解析該 Promise。

語法

你可以使用以下語法在 JavaScript 中使用 async 關鍵字定義函式 -

async function func_name(parameters) {
   // function body
}

在以上語法中，我們在函式名稱之前使用了 'async' 關鍵字。

引數

  • Func_name - 它是函式名稱的有效識別符號。
  • Parameters - 它接受多個引數，與普通函式相同。

檢視下面的非同步函式，它返回“hello world”文字。它返回包含“hello world”成功訊息的 Promise。

async function printMessage() {
   return "Hello World";
}

以下程式碼與以上程式碼類似。

function printMessage() {
   return Promise.resolve("Hello World");
}

你可以使用 then() 和 catch() 方法來解決非同步函式返回的 Promise。

示例

我們在下面的程式碼中從 getText() 函式返回文字。

之後，我們使用 then() 和 catch() 方法以及 getText() 方法的執行來使用 getText() 函式返回的 Promise。

在這裡，你可以觀察到我們從非同步函式返回了文字，但它正在返回 Promise。

<html>
<body>
   <div id = "output"> </div>
   <script>
      async function getText() {
         return "Text from the getText() function.";
      }
      getText().then((text) => {
         document.getElementById('output').innerHTML = text + "<br>";
      }).catch((err) => {
         document.getElementById('output').innerHTML += JSON.stringify(err);
      });
   </script>
</body>
</html>

輸出

Text from the getText() function.

JavaScript Await 關鍵字

你只能在 JavaScript 非同步函式內部使用“await”關鍵字。它會暫停函式的執行，直到 Promise 完成，這意味著它被拒絕或已完成。

語法

以下是 JavaScript 中在非同步函式內部使用“await”關鍵字的語法 -

async function func_name(parameters) {
   await promise;
   // Function body
}

在以上語法中，我們在“async”函式內部使用了“await”關鍵字。

示例

我們在下面的程式碼中定義了 solvePromise() 非同步函式。我們在函式中使用 Promise() 建構函式建立了新的 Promise。之後，我們使用 Promise 以及“await”關鍵字來解析它，而不是使用 then() 或 catch() 方法。

在輸出中，你可以看到它列印了完成訊息。

<html>
<body>
   <div id = "output">The resultant value from the promise is:</div>
   <script>
      async function solvePromise() {
         const promise = new Promise((resolve, reject) => {
            resolve('Promise is solved');
         })
         const result = await promise;
         document.getElementById('output').innerHTML += result;
      }
      solvePromise();
   </script>
</body>
</html>

輸出

The resultant value from the promise is: Promise is solved

示例（等待超時）

在下面的程式碼中，我們使用 setTimeOut() 方法設定了 2000 毫秒的超時時間來解決 Promise。

之後，我們使用 ‘await’ 關鍵字與 Promise 一起，暫停函式的執行，直到 Promise 完成。在輸出中，您可以看到它在 2 秒後列印了 Promise 返回的訊息。

<html>
<body>
   <div id = "output">The promise is being solved <br> </div>
   <script>
      async function solvePromise() {
         const promise = new Promise((resolve, reject) => {
            setTimeout(() => { // Setting up timeout for promises
               resolve('The promise is solved after 2 seconds');
            }, 2000);
         })
         const result = await promise;
         document.getElementById('output').innerHTML += result;
      }
      solvePromise();
   </script>
</body>
</html>

輸出

The promise is being solved
The promise is solved after 2 seconds

JavaScript Async/Await 的錯誤處理

在使用 Promise 時，我們使用 then() 和 catch() 方法來處理資料和錯誤。

使用非同步函式，您可以使用 try…catch 塊來處理錯誤。

當 Promise 成功 fulfilled 時，控制權會執行 ‘try’ 塊的剩餘程式碼。否則，它會執行 ‘catch’ 塊的程式碼來修復錯誤。

語法

以下是處理非同步函式中錯誤的語法：

try {
   const result = await promise;
   // Manipulate data
} catch (err) {
   // Handle errors
}

我們需要在 ‘try’ 塊中使用 Promise，並在 ‘catch’ 塊中處理錯誤。catch() 方法也以 ‘err’ 作為引數，它是一個 Promise 拒絕訊息或錯誤物件。

示例

在下面的程式碼中，我們定義了一個 Promise 並將其拒絕。

之後，我們在 ‘try’ 塊中使用 Promise。由於 Promise 被拒絕，執行控制權將進入 ‘catch’ 塊並列印拒絕訊息。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      let output = document.getElementById('demo');
      async function solvePromise() {
         const promise = new Promise((resolve, reject) => {
            reject("The promise is rejected");
         })
         try {
            const result = await promise;
            output.innerHTML += "Inside the try block. <br>";
            output.innerHTML += result;
         } catch (err) {
            output.innerHTML += "Inside the catch block. <br>";
            output.innerHTML += err;
         }
      }
      solvePromise();
   </script>
</body>
</html>

輸出

Inside the catch block.
The promise is rejected

JavaScript Async 類方法

您還可以使用 ‘async’ 關鍵字定義非同步類方法來處理非同步操作。

它與非同步函式具有相同的語法。

語法

以下是使用 JavaScript 中類方法的 async/await 的語法：

async method_name() {
   return await promise;
}

在上述語法中，method_name 是類方法的識別符號，它使用 async/await 關鍵字使該方法成為非同步方法。

您可以使用 then() 和 catch() 方法使用該方法返回的 Promise。

示例

在下面的程式碼中，我們建立了 animal 類。

animal 類包含 getAnimalName() 方法並返回 ‘Lion’ 文字。我們在 ‘Lion’ 字串之前使用了 await 關鍵字，它會暫停方法的執行，直到字串建立完成。但是，您也可以返回 Promise。

之後，我們使用 then() 方法使用 Promise 並將動物名稱列印到輸出中。

<html>
<body>
   <div id = "output"> </div>
   <script>
      class animal {
         async getAnimalName() {
            return await "Lion";
         }
      }
      const lionObj = new animal();
      lionObj.getAnimalName().then((data) => {
         document.getElementById('output').innerHTML = "The animal name is: " + data;
      })
   </script>
</body>
</html>

輸出

The animal name is: Lion

JavaScript Async/Await 的即時示例

以上示例是演示 JavaScript 中 async/await 關鍵字用法的基本示例。

讓我們瞭解如何在即時開發中使用 async/await。

示例

在下面的程式碼中，當用戶點選按鈕時，它會呼叫 getData() 函式。

getData() 函式是一個非同步函式。我們在函式內部使用了 try…catch 塊來處理錯誤。

在 ‘try’ 塊中，我們使用 fetch() API 從 API 獲取資料並使用 ‘await’ 關鍵字。

之後，我們使用 response 的 json() 方法將其轉換為 JSON 並使用該方法的 ‘await’ 關鍵字。

接下來，我們列印資料。

此外，我們在 catch() 方法中列印錯誤訊息。

<html>
<body>
   <button onclick = "getData()">Get Data</button>
   <div id = "demo"> </div>
   <script>
      let output = document.getElementById('demo');
      async function getData() {
         try {
            let response = await fetch('https://api.github.com/users'); 
            // Pauses the execution until it gets the data
            let data = await response.json(); 
            // Pauses the execution until it converts the data into json
            output.innerHTML += "login: " + data[0].login + "<br>";
            output.innerHTML += "id: " + data[0].id + "<br>";
            output.innerHTML += "node_id: " + data[0].node_id + "<br>";
            output.innerHTML += "avatar_url: " + data[0].avatar_url + "<br>";
         } catch (err) {
            output.innerHTML += "The error is: " + json.stringify(err);
         }
      }
   </script>
</body>
</html>

輸出

Real-time Example of JavaScript Async/Await

使用 JavaScript Async 函式的好處

以下是使用非同步函式的一些好處。

  • 它提高了程式碼的可讀性。
  • 它降低了程式碼的複雜性。
  • 它可以輕鬆地處理多個 Promise。
  • 它使除錯更容易。
  • 您可以用非同步函式替換回調函式和 Promise。
列印頁面
上一頁
下一頁
廣告