ES6 await和async是如何工作的

在本文中，我们将试图了解async和await在ES6中是如何工作的。让我们首先了解async和await是什么以及它们的用法，然后我们将参考一些示例，看看我们如何在普通函数中使用async和await。

Async和Await：

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

Async和Await的工作原理：

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

现在，我们已经了解了在普通函数中使用Async/Await的详细信息，让我们看看以下一些示例，这些示例将最终帮助我们更好地理解这些概念。

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

HTML

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

输出:

1
Hello
GeeksforGeeks

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

HTML

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

输出:

ES6 await和async是如何工作的