如何在 JavaScript 中使用「async」和「await」進行流暢的非同步程式設計？

JavaScript 中帶有「async」和「await」的非同步函數

非同步程式設計在 JavaScript 模型中至關重要。當非同步操作完成時，隨後執行附加程式碼是很常見的。以前，回調被用於此目的。然而，嵌套回調可能會導致“回調地獄”。

Promises

Promise 改善了與嵌套回呼相關的問題。它們透過「承諾鏈」實現鏈接，從而提供更清晰的語法和錯誤處理。例如：

<code class="javascript">const randomProm = new Promise((resolve, reject) => {
  if (Math.random() > 0.5) {
    resolve('Succes');
  } else {
    reject('Failure');
  }
});

// Promise chain
randomProm
  .then((value) => {
    console.log('inside then1');
    console.log(value);
    return value;
  })
  .then((value) => {
    console.log('inside then2');
    console.log(value);
    return value;
  })
  .catch((value) => {
    console.log('inside catch');
    console.log(value);
  });</code>

'async' 和 'await' 關鍵字

引入非同步函數，也稱為“非同步函數”，以進一步簡化非同步程式設計。這些函數以 async 關鍵字為前綴，並允許使用await 關鍵字。

await 暫停非同步函數的執行，直到其中的表達式（通常是 Promise）穩定下來。一旦表達式解析，函數就會恢復。例如：

<code class="javascript">async function myAsyncFunc() {
  try {
    const result = await randomProm;
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

myAsyncFunc();</code>

在此範例中，myAsyncFunc 是一個等待 randomProm Promise 結果的非同步函數。一旦 Promise 解析或拒絕，就會執行 try/catch 區塊的對應分支。透過利用 async 和 wait，我們消除了對複雜回呼邏輯的需求並增強了程式碼可讀性。

以上是如何在 JavaScript 中使用「async」和「await」進行流暢的非同步程式設計？的詳細內容。更多資訊請關注PHP中文網其他相關文章！