Advanced JavaScript: A Deep Dive into the Core Concepts

A quick guide to async/await in Javascript

Board Infinity
Board Infinity
A quick guide to async/await in Javascript

    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

To indicate that a function is an asynchronous function, we use the async keyword with the function. The promise that the async function returns.

The Async function syntax is as follows:

async function name(parameter1, parameter2, ...paramaterN) {

    // statements

}

Here,

  • name - the function's name
  • parameters - Information provided to the function via parameters

Async Function

// async function example


async function f() {

    console.log('Async function.');

    return Promise.resolve(1);

}


f();

Output:

The async keyword is used before the function in the aforementioned program to indicate that the function is asynchronous.

Since this function produces a promise, the following example shows how to utilize the chaining technique then():

async function f() {

    console.log('Async function.');

    return Promise.resolve(1);

}


f().then(function(result) {

    console.log(result)

});

Output:

The then() procedure is carried out in the aforementioned programme once the f() function has been resolved.

Await Keyword in JavaScript:

The async function uses the await keyword to wait for the asynchronous action.

The appropriate syntax for await is:

let result = await promise;

When await is used, the async function is suspended until the promise's outcome (a resolve or reject value) is returned. For instance,

// a promise

let promise = new Promise(function (resolve, reject) {

    setTimeout(function () {

    resolve('Promise resolved')}, 4000); 

});


// async function

async function asyncFunc() {


    // wait until the promise resolves 

    let result = await promise; 


    console.log(result);

    console.log('hello');

}


// calling the async function

asyncFunc();

write your code here: Coding Playground

Output:

A Promise object is generated in the programme above, and it is resolved 4000 milliseconds later. Here, the async function is used to create the asyncFunc() function.

The await keyword watches for the fulfillment of the promise (resolve or reject).

let result = await promise;

Hello is therefore only shown once the promise value has been made accessible to the result variable.

If await is not used in the application above, hello is shown before the Promise is resolved.

Note: Only async methods may contain await.

The async function enables the execution of the asynchronous method in a manner that seems synchronous. Despite being asynchronous, the operation seems to be carried out synchronously.

If the program has several promises, this may be helpful. For instance,

let promise1;

let promise2;

let promise3;


async function asyncFunc() {

    let result1 = await promise1;

    let result2 = await promise2;

    let result3 = await promise3;


    console.log(result1);

    console.log(result1);

    console.log(result1);

}

write your code here: Coding Playground

Advantages of Async Functions:

  • Compared to calling a callback or a promise, the code is easier to read.
  • Handling errors is easier.
  • Testing is simpler.

Note: The more recent version of JavaScript added the terms async and await (ES8). The usage of async/await may not be supported by some older browsers. Visit JavaScript async/await browser support for additional information.