Handle Asynchronous Data in Javascript

Asynchronous in Javascript

Hello viewers, whats up!! Here i am back again with the new post of asynchronous in javascript. Javascript is a high level programming language used for known as web development. With this you can create dynamic and interactive content on websites.

Syntax is similar to that of other programming languages like java and C. It is client side scripting language and when we talk about its Data types , it is support various data types, including numbers, strings booleans objects, arrays and functions.

Asynchronous 

In JavaScript, asynchronous programming is a way to handle operations that might take some time to complete, such as reading from a file, making a network request, or waiting for a user input. Asynchronous programming helps prevent blocking the execution of code, allowing other tasks to continue while the asynchronous operation is being performed.

Note - Asynchronous in Javascript = CLICK HERE

How is it works?

The asynchronous working process in JavaScript involves handling tasks that might take some time to complete without blocking the execution of the entire program. This is crucial for web development, where operations like fetching data from an API, reading files, or responding to user input may introduce delays.

Let's code

let a = 20;
let b = 0;

let waitingData = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(30)
    }, 2000)
})

waitingData.then((data) => {
    b=data;
    console.log(a+b)
})

Explaination

1) Variable Declaration

let a = 20;
let b = 0;


Two variables, a and b, are declared and initialized with values 20 and 0, respectively.



2) Promise Creation:



let waitingData = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(30)
    }, 2000)
})


A new Promise named waitingData is created.

The promise executor function is provided, which has two parameters: resolve and reject.

Inside the executor function, a setTimeout is used to simulate an asynchronous operation. After 2000 milliseconds (2 seconds), the promise is resolved with the value 30.



3) Promise Handling:

waitingData.then((data) => {
    b = data;
    console.log(a + b);
})


The then method is called on the waitingData promise, which registers a callback function to be executed when the promise is resolved.

The callback function takes a parameter data, which is the resolved value of the promise (in this case, 30).

Inside the callback, the variable b is assigned the value of data (which is 30).

The sum of a and b (20 + 30) is then logged to the console, resulting in the output 50.

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer