JavaScript Async/Await

JavaScript总是同步和单线程的，提供了事件循环。事件循环使我们能够排队活动。在程序完成执行并且事件循环可用之前，这个活动不会发生。然而，我们的程序包含大量功能，这导致我们的代码是异步的。其中之一是 Async/Await 功能。 Async/Await 是我们所得到的 promise 作为语言支持的扩展。

在本文中，我们将讨论使用一些示例的JavaScriptAsync/Await。

JavaScript Async

异步函数是使用async关键字声明的函数，允许在函数内使用await关键字。async和await关键字允许更轻松地编写基于promise的异步行为，并避免配置promise链。async关键字可以与任何创建函数的方法一起使用。

语法

JavaScript的语法可以定义为：

Async function myfirstfunction() {
return "Hello World"
}

这与之前的一样：

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

示例

让我们来举一个示例，以了解我们如何在程序中使用JavaScript异步。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title>JavaScript Async</title>
</head>
<body>
    <h2>JavaScript Async</h2>
    <p id="main"></p>
<script>
function myDisplayer(some) {
  document.getElementById("main").innerHTML = some;
}
async function myfirstFunction() {
    return "Hello World!!!";
    }
myfirstFunction().then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
</script>
</body>
</html>

输出: 在执行上述代码之后，我们将在截图中看到以下输出结果。

JavaScript Async/Await

JavaScript Await

JavaScript Await函数用于等待Promise。它只能在async块内部使用。它指示代码等待直到Promise返回响应。它只延迟async块。Await是一个简单的命令，它指示JavaScript在继续执行功能之前等待异步操作完成。它类似于一个 “暂停直到完成” 关键字。await关键字用于从函数中检索值，通常我们会使用 then() 函数。而不是在异步函数之后调用，我们会使用await将变量分配给结果，然后在代码中使用结果，就像在同步代码中一样。

语法

JavaScript Await函数的语法可以定义如下：

// Await function works only inside the async function
let value = await promise;

示例1

让我们通过一个示例来理解如何在程序中使用JavaScript Await函数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title>JavaScript Await</title>
</head>
<body>
    <h2>JavaScript Await</h2>
    <p id="main"></p>
<script>
async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    myResolve("Hello World!!");
  });
  document.getElementById("main").innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>

输出： 执行此代码后，我们将在下图中得到如下所示的输出：

JavaScript Async/Await

示例2：在程序中等待超时

让我们来看一个程序，以理解JavaScript中使用超时等待函数的Await。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title>JavaScript Await</title>
</head>
<body>
    <h2>JavaScript Await</h2>
    <p id="main"></p>
<script>
async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("Hello World!!"); }, 2000);
  });
  document.getElementById("main").innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>

输出: 执行这段代码后，我们将会在下面的屏幕截图中看到如下的输出结果。

JavaScript Async/Await

当我们执行代码时，在 2 秒后将显示结果。它使用了超时函数。

JavaScript Async/Await

错误处理

在异步函数中处理错误非常容易。Promise提供了一个 catch() 方法来处理被拒绝的Promise，而且由于异步函数只返回一个Promise，我们可以调用该函数并在末尾添加一个方法。我们应该像处理其他catch一样使用Promise的捕捉。而且所有的方式都很容易理解。记住，then回调可能会失败。它可以生成一个错误（通过明确抛出或尝试访问null变量的属性）。这些崩溃也将被捕获。请记住，Promise的捕获方式与标准的catch类似。

语法

错误处理的语法可以定义为：

asyncFunc().catch(err => 
{
Console.error(err)
// catch error and do something
});

但还有另一种选择：全能的 try/catch 块。如果我们想要在异步函数内部直接处理错误，我们可以像在同步代码中一样使用try/catch。

示例

让我们通过一个示例来理解JavaScript异步和等待函数中的错误处理。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title>JavaScript Await</title>
</head>
<body>
    <h2>JavaScript Await</h2>
<script>
async function f() {
try {
  let response = await fetch('http://no-url');
} catch(err) {
  alert(err); // TypeError: failed to fetch
}
}
f();
</script>
</body>
</html>

输出: 执行此代码后，我们将在屏幕截图中看到下面所示的输出。

JavaScript Async/Await