如何在JavaScript中的异步函数之外使用await？

javascriptjavascript 2023-08-28 05:39:40 822
摘要： 在JavaScript中，async-await关键字用于使函数异步。如果我们将任何函数设为异步，它就会像多线程一样工作并并行执行代码，这有助于我们提高应用程序性能。在这里，我们将学习在异步函数之外使用await关键字。立即调用...

如何在JavaScript中的异步函数之外使用await？

在 JavaScript 中，async-await 关键字用于使函数异步。如果我们将任何函数设为异步，它就会像多线程一样工作并并行执行代码，这有助于我们提高应用程序性能。

在这里，我们将学习在异步函数之外使用await关键字。

立即调用函数

我们将使用此方法中的表达式来立即调用该函数。我们可以将await关键字与promise或函数内的任何其他函数一起使用。

语法

用户可以按照以下语法使用函数表达式立即调用函数。

(async () => {
   let result = await fetchData();
})();

在上面的语法中，我们没有创建函数，但在大括号内，我们使用 async 和await 关键字编写了箭头函数语法。

示例 1

在下面的示例中，我们在定义函数后立即调用该函数。在表达式内部，我们定义了箭头函数。在箭头函数的代码块中，我们使用了await关键字和axios来从API获取数据。

我们在 部分添加了 CDN 以使用 axios。在输出中，用户可以观察我们从 API 获取的数据。

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
   <h2>Using the <i>await</i> with immediately invoking function expression.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');

      (async () => {
         let result = await axios.get("https://dummyjson.com/products/1");

         output.innerHTML += "The results from the API is <br/>";
         for (let key in result.data) {
            output.innerHTML += key + " : " + result.data[key] + "<br/>";
         }
      })();
   </script>
</body>
</html>

使用承诺

我们可以使用 Promise 代替异步函数来等待，直到收到服务器的响应或暂停代码的执行。

语法

用户可以按照以下语法在 JavaScript 中使用 Promise。

promise.then((response) => {
   // use response
})
.catch((err) => {
   // handle the errors
})

在上面的语法中，我们使用了 then() 和 catch() 块以及 Promise 来处理响应和错误。

示例 2

在下面的示例中，我们执行与示例 1 相同的操作。在示例 1 中，我们使用 async-await 语法和 axios 来获取数据。在这里，我们使用 axios 的 Promise 来获取数据。 axios.get() 方法返回 Promise，我们使用 then() 和 catch() 块来解析该 Promise。

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
   <h2>Using the <i>promises</i> instead of async-await.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      (() => {
         axios.get("https://dummyjson.com/products/1").then((result) => {

            output.innerHTML += "The results from the API is <br/>";
            for (let key in result.data) {
                  output.innerHTML += key + " : " + result.data[key] + "<br/>";
            }
         })
         .catch((err) => {
            output.innerHTML += "The error is " + err;
         })
      })();
   </script>
</body>
</html>

示例 3

在此示例中，我们使用带有 new 关键字的 Promise() 构造函数创建了一个 Promise。我们正在拒绝这个承诺。

之后，我们使用 then() 和 catch() 块以及 SamplePromise Promise 变量来从 Promise 获取响应或错误。用户可以观察到控制权转到输出中的 catch() 块，因为我们拒绝了错误。

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
   <h2>Using the <i>promises</i> instead of async-await.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let SamplePromise = new Promise((resolve, reject) => {
         reject("Promise is rejected without any error");
      })
      SamplePromise.then((response)=>{
         output.innerHTML += "Response from the promise is " + response;
      })
      .catch((err)=>{
         output.innerHTML += "The error message is - " + err;
      })
   </script>
</body>
</html>

标签：