ES6 中的 await 和 async 是如何工作的？

在本文中，我们将尝试了解 async 和 await 在 ES6 中的工作原理。让我们首先尝试了解 async 和 await 到底是什么以及它们的用法，然后我们将进一步看到一些示例，在这些示例中，我们将了解如何将 async 和 await 与正常功能一起使用。

异步和等待：

• Async 和 Await 都被认为是 ES6 提供的特殊关键字，用于执行一些异步数据操作。甚至同步操作也可以使用这些关键字来执行。
• Async 关键字与函数声明一起使用，该声明指定此函数现在能够在其自身上接受所有类型的异步事件。
• 换句话说， async 关键字与函数（或方法）一起使用，使它们能够轻松接收所有类型的异步数据。
• 与函数一起使用的异步关键字总是在最后返回一个 Promise 及其状态（待处理、已解决或已拒绝）。
• Await 在 async函数中使用，虽然对于等待结果的目的很有用。
• Await 基本上是等待特别是从异步函数即将从中获取数据的源中获取的结果。
• Await 需要一些时间从源（如 API）获取结果，然后与 async函数一起以 Promise 的形式返回结果。
• 如果 Async 与函数声明一起使用，也可以使用 Await。

异步和等待的工作：

• 每当用户在其声明中使用 async 关键字声明函数时，它自动暗示该函数或方法已准备好接收其自身的所有异步事件。
• 在此之后，我们通常使用 await 关键字，然后等待结果，然后成功获取它。
• 之后，我们将获取的结果存储在某个随机变量中，然后根据需要显示结果或将该结果用于其他几个目的。
• 与其他普通函数相比，使用 Async/Await 关键字的函数最终会将其结果保存一小段时间。
• 成功完成后，结果可用于代码本身内的进一步数据操作，或可成功显示在浏览器的控制台上。

现在我们已经了解了与普通函数中的 Async/Await 用法相关的细节，让我们看看下面的一些示例，它们最终将帮助我们以更好的方式理解事物。

示例 1：在此示例中，我们将在常规函数（或方法）中使用 async 和 await。除此之外，我们将显示一些其他结果。下面的输出将向我们展示一件事，由于使用了 await 关键字，我们的结果与我们正在显示的其他结果相比会延迟一点。

HTML

    let dataDisplay = async () => {
      let data = await "GeeksforGeeks";
      console.log(data);
    };
    console.log(1);
    dataDisplay();
    console.log("Hello");

输出：

1
Hello
GeeksforGeeks

示例 2：在此示例中，我们将使用开源 API，它是免费提供的 API，所有人都可以访问。我们将在浏览器的控制台中从该 API 获取结果。这个例子清楚地展示了我们在使用多个实时 API 时一般如何使用 async/await。输出将显示在下图中。

HTML

    async function fetchMethod() {
      let response = await fetch(
        "https://reqres.in/api/products/3");
      let data = await response.json();
      console.log(data);
    }
    fetchMethod();

输出：