Advanced JavaScript: A Deep Dive into the Core Concepts

Javascript Async and Await Function

Board Infinity
Board Infinity
Javascript Async and Await Function

    Javascript vs Typescript: What is the Difference?

    Understanding Array Slice() in JavaScript

    JavaScript: Array Filter() Method

    JavaScript array map() method

    Encoding and Decoding URL in JavaScript: How?

    JavaScript Fetch API Explanation

    A quick guide to Debounce in JavaScript

    Promise in JavaScript

    What is Promise.all in JavaScript?

    Javascript Async and Await Function

    A quick guide to async/await in Javascript

    10 Best JavaScript Frameworks to Use in 2023

    Trends and Tools of JavaScript in 2022

    JavaScript Interview Questions and Answers (2023)

Introduction

Async/await is a way to write asynchronous code in JavaScript, which means it can use features such as callback functions. async/await allows you to write more modular code by making your asynchronous calls more predictable. The use of Async/Await in JavaScript is to offer better performance and as a way for developers to write cleaner code. It also allows developers to provide an option for non-blocking operation. Async/Await is a JavaScript function that allows asynchronous code to be written in a synchronous manner. This function can be used to write code that looks like it is blocking, but it actually executes asynchronously.

Important

The async keyword indicates the start of an asynchronous operation and the await keyword indicates that the execution should pause until the asynchronous operation completes.

Async

async ensures that the function returns a promise, and wraps non-promises in it. Asynchronous functions are functions that can be invoked in response to an external event, such as an HTTP request. They are intended to replace callback functions. An Async Function is a function which can be executed asynchronously so that it does not affect the performance of your JavaScript code. Async functions in JavaScript let us write asynchronous code. It makes use of promises and callbacks. In this tutorial we will see how async functions can help us write more elegant, readable and testable code for asynchronous operations.

Async functions that can return a promise for future results. They do so by returning a function, which you can use to make the value promised from the function be fulfilled in its own time. await makes JavaScript wait until that promise settles and returns its result.

const getData = async() => {
    var data = "Hello BI";
    return data;
}
getData().then(data => console.log(data));

Output

Hello BI

write your code here: Coding Playground

Await

The Await() function in JavaScript is a method that can be invoked to wait until a specified condition is resolved. It allows you to selectively wait for an event or run some code, based on an outcome. You can wait for an event to happen before executing code. The JavaScript await keyword lets you pause execution until that event is triggered. The await keyword lets you delay the execution of a task by executing a block. Because it blocks the current thread, this technique can be used to perform long-running operations or retrieve data from the network. Await function is used to wait for the promise. It could be used within the async block only. It makes the code wait until the promise returns a result. It only makes the async block wait.

const getData = async() => {
    var y = await "Hello BI";
    console.log(y);
}

console.log(1);
getData();
console.log(2);

Output

1
2
Hello BI

Example

async function bi() {

    let promise = new Promise((resolve, reject) => {
      setTimeout(() => resolve("done!"), 1000)
    });
 
    let result = await promise;
 
    alert(result);
  }
 
  bi();

Output

done!

write your code here: Coding Playground

Conclusion

async await allows you to write asynchronous code that executes in parallel with the main flow of your code, without needing to use continue or break statements. The async generator functions you can use as decorators around any function help you abstract the complexity away from calling asynchronous functions by themselves. In JavaScript the Async/Await pattern is used to handle asynchronous operations such as fetching data from a server and posting results to a database or parsing HTML for display on your page.