Javascript Introduction
Comments in Javascript
Javascript Variables
Difference between var, let and const in Javascript
Datatypes
Assignment Operators
Logical Operators
Comparison Operators
Actions alert, prompt & confirm

Javascript Flow Control
Conditional Statements in Javascript
Nullish coalescing operator in Javascript
Break and Continue in Javascript
Loops in javascript
for loop in Javascript
while loop

Javascript Functions
Javascript Functions
JavaScript Arrow Function

Javascript Objects
Javascript Objects

Javascript Array
Javascript Arrays

Javascript Error Handling
Error Handling in Javascript

Javascript ES6
Set
Javascript Spread Operator
Rest Parameter in Javascript

Javascript Asynchronous
Javascript Callback Function
Promises in Javascript
Promise Chaining
Async-Await in Javascript

Javascript DOM
DOM Document
DOM Elements
DOM Attributes
DOM Manipulation
DOM Node Lists
Javascript Events
DOM Traversing Elements
DOM EventListener

Javascript Class
Classes in javascript
Class Inheritance

Javascript Design Principles
SOLID - The Single responsibility principle in javascript
SOLID - Open-Closed principle in Javascript

Other Topics
Javascript Hoisting
Filter, Map and Reduce functions in Javascript
Closure in Javascript
Optional chaining operator in Javascript
Consoling in table format in javascript
Fetch API in Javascript
HTML web Storage API
Checking the online or offline status of the browser

Async/Await in Javascript

Async/Await is a new feature that has been added to ES8 which allows us to write synchronous looking code but performing the task asynchronously. Async/await can be used instead of promise chaining.

Let's see an example program for async/await:

function taskOne() {
    return new Promise((resolve, reject) => {
        resolve('Task 1 completed');
    });
}

function taskTwo() {
    return new Promise((resolve, reject) => {
        resolve('Task 2 completed');
    });
}

function taskThree() {
    return new Promise((resolve, reject) => {
        reject(new Error('Task 3 interupted'));
    })
}

async function executeTasks() {
    try {
        const taskOneResult = await taskOne();
        console.log(taskOneResult);
        const taskTwoResult = await taskTwo();
        console.log(taskTwoResult);
        const taskThreeResult = await taskThree();
        console.log(taskThreeResult);
    } catch (error) {
        console.log(error.message);
    }
}

executeTasks();

Output

Task 1 completed
Task 2 completed
Task 3 completed

In the example above, we have declared 3 functions that returns promise. taskOne() and taskTwo() functions will return response by taskThree() function rejects and returns an error.

In order to use async/await we declare the executeTasks() function as async function. Now this function can wait for the promise to execute by using the ???await' keyword.

The taskOne() function returns ???Task 1 completed' which will be logged to console. Similary taskTwo() function will return ???Task 2 completed' which will be logged to the console and finally the taskThree() function will reject with error message ???Task 3 interupted'. Now the rejected value will be caught in the catch block of executeTask() function and will be logged to the console.

The Async function will return a promise by default. So the above promise has been modified to

        async function taskOne() {
       return 'Task 1 completed';
}

const taskOneResult = taskOne();
console.log(taskOneResult);

Now the above code will console a promise object rather than ???Task 1 completed'. To solve this we can use the below code

        async function taskOne() {
       return 'Task 1 completed';
}
taskOne().then((data)=>{
	console.log(data);
});

                
    

Now we shall rewrite the first example that was written with promise to async function.

        async function taskOne() {
    return 'Task 1 completed';
}

async function taskTwo() {
    return 'Task 2 completed';
}

async function taskThree() {
    throw new Error('Task 3 interupted');
}

async function executeTasks() {
    try {
        const taskOneResult = await taskOne();
        console.log(taskOneResult);
        const taskTwoResult = await taskTwo();
        console.log(taskTwoResult);
        const taskThreeResult = await taskThree();
        console.log(taskThreeResult);
    } catch (error) {
        console.log(error.message);
    }
}

executeTasks();
      
    

Output

Task 1 completed
Task 2 completed
Task 3 completed

This produces the same output like above method. Here the taskThree() function has manually thrown an error which will be caught by the catch block of executeTask() function and logs in console.

Async/Await in Javascript

Categories

Most Read