Home > Article > Web Front-end > How to use await outside of an async function in JavaScript?

How to use await outside of an async function in JavaScript?

WBOYforward: 2023-08-26 16:53:021142browse

In JavaScript, the async-await keyword is used to make a function asynchronous. If we make any function async, it works like multi-threads and executes the code in parallel, which helps us improve application performance.

Here, we will learn to use the await keyword outside of an asynchronous function.

Call function immediately

We will use the expression in this method to call the function immediately. We can use await keyword with promise or any other function inside the function.

grammar

Users can use function expressions to call functions immediately according to the following syntax.

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

In the above syntax, we have not created a function, but inside the curly brackets, we have written the arrow function syntax using async and await keywords.

Example 1

In the example below, we call the function immediately after defining it. Inside the expression, we define the arrow function. In the code block of the arrow function, we have used the await keyword and axios to get data from the API.

We added a CDN to use axios in the

section. In the output, the user can observe the data we got from the 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>

Use promises

We can use Promise instead of an asynchronous function to wait until we receive a response from the server or pause the execution of the code.

grammar

Users can use Promise in JavaScript according to the following syntax.

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

In the above syntax, we use then() and catch() blocks and Promise to handle responses and errors.

Example 2

In the following example, we do the same thing as Example 1. In Example 1, we use async-await syntax and axios to get the data. Here, we use axios’ Promise to get the data. The axios.get() method returns a Promise, which we resolve using then() and catch() blocks.

<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>

Example 3

In this example, we create a Promise using the Promise() constructor with the new keyword. We are rejecting this commitment.

After that, we use then() and catch() blocks and the SamplePromise Promise variable to get the response or error from the Promise. The user can observe that control goes to the catch() block in the output because we reject the error.

<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>

This tutorial teaches users to use the await keyword outside of asynchronous functions. Additionally, we explained an alternative to using Promise to use the async-await keyword.

The above is the detailed content of How to use await outside of an async function in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript 构造函数 catch 线程多线程 promise 异步

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to check if a value is primitive in JavaScript?Next article：How to check if a value is primitive in JavaScript?

See more

How to use await outside of an async function in JavaScript?

Call function immediately

grammar

Example 1

Use promises

grammar

Example 2

Example 3

Related articles