Async/await in JavaScript

Async/await is an extension of promise. We use async keyword with a function to represent that the function is asynchronous. The async function returns a promise. It is also possible to use await keyword inside a async function.

Javascript async keyword:

Syntax:

async function name(parameter1, parameter2, ...paramaterN) {
    // statements
}

name – name of function

parameter- parameter that are passed

Example:

// async function example

async function f() {
    console.log('Async function.');
    return Promise.resolve(1);
}

Output:

Async function.

Since async function returns a promise we can use chaining method then()

Async with promise chaining:

async function f() {
    console.log('Async function.');
    return Promise.resolve(1);
}

f().then(function(result) {
    console.log(result)
});

Output:

Async function.

1

In the example first f() function is resolved and then function gets executed.

JavaScript await keyword:

await keyword is used inside the async function to wait for asynchronous operation.

Syntax:

let result = await promise;

await pauses the asynchronous function till the promise returns a resolved or rejected value.

// 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();

Output:

Promise resolved

Hello

Here first a promise object is created and it gets resolved after 4000 milliseconds. The async function waits for promise to resolve or reject and returns hello only after promise is complete.

The same program without await will print hello before resolving promise.

The async function helps to execute asynchronous methods in a synchronous way. This is helpful for multiple promises in a program.

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);
}

Error handling:

In async function we can use catch method to catch the errors.
asyncFunc().catch(
    // catch error and do something
)
We can also use try/catch,
// a promise
let promise = new Promise(function (resolve, reject) {
    setTimeout(function () {
    resolve('Promise resolved')}, 4000); 
});

// async function
async function asyncFunc() {
    try {
        // wait until the promise resolves 
        let result = await promise; 

        console.log(result);
    }   

    catch(error) {
        console.log(error);
    }
}

// calling the async function
asyncFunc(); // Promise resolved

Output:

Promise resolved

Async/await is helpful in error handling, debugging and makes the code readable.

Supported Browsers: 

• Google Chrome 55 and above
• Firefox 52 and above
• Apple Safari 10.1 and above
• Opera 42 and above
• Edge 14 and above