How To Use Asynchronous Programming in JavaScript.

Javascript Asyncronous

Introduction:-

As we know as a developer, JavaScript is synchronous in behavior. If we want to achieve concurrency in JavaScript then we can make use of callback functions, which are executed in an async manner, is facility provided by language by function as a parameter in another function. It is possible because the function is a first class object in JavaScript.

Callback Function():-

JavaScript language is the only language which provides callback functions. The callback functions are those functions which are executed after finishing another function. In JavaScript, we create a callback function by passing as a parameter in other function which will be executed after the task is completed. It is a core functional programming concept. It's real-time implementation, in JavaScript, can be found an i.e. setTimeout event or making API calls.

setTimeout() function:- The setTimeout accepts a callback function as its parameter and also a time interval. In its implementation, it uses asynchronous code which runs in the future.

How asynchronous code works- if you are habitual of synchronous code then you thought that this example run like-

1st run HELLO then it takes time for the 2nd statement after takes the time it displays what's up and then HELLO AGAIN.

but in asynchronous code, it runs are as follows-

First of all, "Hello" would be displayed and SetTimeout function would be invoked but It waits for 1 min. Meanwhile, the control goes to the next statement and executes it and displays "Hello again!". After one minute completion, it prints "What's up".

Ex:- Callback function executes as it has been depicted in the below-mentioned snippet.
console.log("Hello.");
setTimeout(function() {
console.log("What's up");
}, 1000);
console.log("Hello again!");

Need of Promise:- When there is deep level nesting of callbacks or we want to execute multiple callbacks sequence then it becomes very difficult to manage which also known as callback hell. To overcome these problems, the promise came to the picture.

Promise:- As per the name Promise means that someone guarantees that something will definitely happen. This meaning is also the same in JavaScript that promise indicates the result of an async operation. Promises are one way to deal with the asynchronous code on the behalf of to write to many callback functions.

Promise has three different states:-

1. fulfilled:- It represents the state of promise is successful.

2. rejected:- It represents the state of promise is Failed.

3. pending:- It represents the Initial state of promise.

Create a Promise:-

Ex- let data = true
let promiseObj = new Promise(
(resolve, reject) = {
if (data) {
let success = 'Susscessfully resolved'
resolve(success)
} else {
let notSuccess = 'Unsuccessfull'
reject(notSuccess)
}
})

In this example promise checks the data global, if it's true, then it returns a resolved promise, otherwise, it rejects the promise(rejected), with the help of resolve and rejects we communicate with the value, in another case, it can be returned as string or object as well.

How Use Promise:-

Ex:-
getPromise(data).then( 
function(result){ 
console.log("success",result);
},function(error){ 
console.log("error",error); 
});

When getPromise() will execute it will wait for it to resolve with the help of the callback, otherwise, it displays the error.

Conclusion:-

This is only the overview of how synchronous JavaScript facility converts into the asynchronous facility.