JavaScript - Async/Await

使用 async/await 关键字定义的 JavaScript 函数可以用更少的代码行完成与 Promise 相同的任务，并且使代码更具可读性。Promise 的语法有点复杂，因此引入了 async/await 语法。

要使用 async/await，我们需要先定义一个异步函数。为此，我们在函数定义之前编写 async 。异步函数返回一个 Promise。await 关键字仅在异步函数内部使用。await 关键字使 JavaScript 等待 Promise 解析后再继续执行函数。

让我们分别详细了解 async/await 关键字 -

JavaScript Async 关键字

使用 async 关键字定义的 JavaScript 函数称为异步函数。异步函数允许您生成异步代码。

它总是返回 Promise。如果您没有手动返回 Promise，而是返回数据、字符串、数字等，它会创建一个新的 Promise，并使用返回值解析该 Promise。

语法

您可以使用以下语法在 JavaScript 中使用 async 关键字定义一个函数 -

async function func_name(parameters) {
    // 函数主体
}

在上述语法中，我们在函数名称前使用了 'async' 关键字。

参数

Func_name - 它是函数名称的有效标识符。
parameters - 它接受多个参数，与常规函数相同。

查看下面的异步函数，返回"hello world"文本。它返回带有"hello world"成功消息的承诺。

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 被解决(这意味着 Promise 被拒绝或完成)。

语法

以下是在 JavaScript 异步函数中使用 await 关键字的语法 -

async function func_name(parameters) {
   await promise;
   // 函数主体
}

在上述语法中，我们在异步函数中使用了 await 关键字。

示例

我们在下面的代码中定义了solvePromise()异步函数。我们在函数中使用了Promise()构造函数创建了新的promise。之后，我们使用await关键字和promise来解析它，而不是使用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() 方法来处理数据和错误。

使用异步函数时，您可以使用 trycatch 块来处理错误。

当 Promise 成功完成时，控件将执行 try 块的剩余代码。否则，它将执行 catch 块的代码来修复错误。

语法

以下是在异步函数中处理错误的语法 -

try {
    const result = await promise;
    // 操作数据
} catch (err) {
    // 处理错误
}

我们需要在 try 块中使用 Promise，并在 catch 块中处理错误。 catch() 方法也接受 err 作为参数，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 关键字定义异步类方法来处理异步操作。

它的语法与异步函数相同。

语法

以下是在 JavaScript 中将 async/await 与类方法一起使用的语法 -

async method_name() {
    return await promise;
}

在上述语法中，method_name 是类方法的标识符，它使用 async/await 关键字使该方法异步执行。

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

示例

在下面的代码中，我们创建了动物类。

动物类包含 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