Understanding Asynchronous programming in JavaScript

In this article, we will see what is Asynchronous programming in JavaScript?

First we gonna see what is synchronous Programming : In a 2 line Synchronous Program, line 2 cannot start before line 1 is executed and finished.

Example: Supermarket line.

Super market line will be one person at the time, the person at back will wait until rest of the persons are dispatched.

Now lets see what is Asynchronous Programming: in Asynchronous Programming line 2 can be executed at the same time than line 1, and finish first.

• Time execution will depend on how complex is the task.

Example: Restaurant, in restaurants there are 30, 40, 100 eating at the same time, if two persons order something at menu at the same time, for example one orders one glass of water, one order the most complex thing at menu, the person who asks the glass of water is attented first than the person who asks the most complex thing in menu.

In JavaScript :

• Most of the time when you create asynchronous code is going to be when consuming API’s or REST API’s
• You can Create asynchronous code with XHTMLHTTPRequest and Fetch API

You can also create Asynchronous Code with the following functions

• Callbacks
• Promises
• Async/Await

Callbacks- they known as cornerstone of asynchronous programming in JavaScript, it is simple function inside another function.

Lets see what are Callbacks:

lets create an Array cities in above image, and pass some cities names, use ForEach statement to access individual values

cities.forEach(function() {

});

this is callback because this is a function inside another the function.

this function doesn’t have name so it is inline callback, function inside should have name city and than do console.log . this will print individual values for this array in console.log .

cities.forEach(function(city) {

console.log(city);

});

Promises- promise object represents when a function or task is completed or failed in asynchronous operation and its resulting values.

example: create new const variable apply

promise() will create new promise object , it will have a callback function , it requires resolve and reject parameters

promises represents when a function is completed or has failed

resolve will execute once function is successful

reject will execute if function is unsuccessful

create a new variable discount to true;

it check if it is true than it resolve(‘Discount Applied’);

else it will reject if discount fail

in order to get promise value add .then()

if variable discount is set to false, in order to access reject value use keyword catch(), it will get error from promise

Async/Await- Async function defines asynchronous functions, which return asynchronous object. when you are working with async/await as async before function , by this we are telling JavaScript that this function is asynchronous.

create a const variable clients, it equals new promise , pass resolve and reject , use arrow function, settimeout delay this for 1 second,

lets say we want to download list of clients, so resolve(‘Client list downloaded..’)

it will take one second to perform

then we create an error, create const error = true;

check if error, wait this response until this promise is executed

in else statement it await for error and use promise.reject(‘there was an error’)

it will execute if there is an error

when you see promise is pending in console.log perform .then() operation

in order to get error use catch() .

thanks for reading.

stay tuned.