Asynchronous and Synchronous are one of the few most popular and most confusing JavaScript Words.
Especially for beginners these words are like an untold story.
Javascript is a single-threaded programming language,
Ques.What is the reason behind calling JavaScript as a single-threaded Programming
Language?
Ans. It means that in JavaScript only one task can execute at a point of time.
But there are situations when we want to execute more than one
tasks at a time then at time Asynchronous Javascript comes into the picture.
Let's look at a simple example
const btn=
In the above example we grab a reference to a
button element that is already available in the DOM.
document.querySelector('btn);
btn.addEventListener('click', () => {
alert('You clicked me!');
let pElem = document.createElement('p');
p.textContent = 'This is a newly-added paragraph.';
document.body.appendChild(p);
});
We add a click event listener to it so that when the
button is clicked:
1.An alert() message appears.
2.Once the alert is dismissed, we create a
element.
3.We then give it some text content.
4.Finally, we append the paragraph to the document
body.
Here as long as one operation is processed, nothing else can process.This is because as we have earlier read
that JavaScript is a single threaded language which mean that only one thing can happen at a time.
So in the example above, after you've clicked the button the paragraph won't appear until after the
OK button is pressed in the alert box
Here Asynchronous JasvaScript comes to rescue.It enables us to overcome this limation of JavaScript being
single-threaded.
There are two main types of asynchronous code style you'll come across in JavaScript code, old-style callbacks
and newer promise-style code.
Here I will be taking you through newer style of asynchronous code:
1.Promises
Promises are the new style of async code that you'll see used in modern Web APIs.
A good example is the fetch() API, which is basically like a modern, more efficient version of
XMLHttpRequest.
Let's Look at a example to understand the concept of asynchronous
fetch("url")
.then((response)=>{
return response.json();
})
.then((data)=>{
console.log(data)
console.log("Promise is returned")})
console.log("Promise is being processed");
Output:Promise is being processed; Promise is returned
Here we see fetch() taking a single parameter — the URL of a resource you want to fetch from the network>
— and returning a promise. The promise is an object representing the completion or failure of the async
operation.
It represents an intermediate state, as it were. In essence, it's the browser's way of saying "I promise to get
back to you
with the answer as soon as I can," hence the name "promise." by the time this promise is being returned code
execution
skips the fetch block and execute the code after the fetch() block, which you can understand from the above
example output
We've then got three further code blocks chained onto the end of the fetch():
1.Two then() blocks. Both contain a callback function that will run if the previous operation is successful, and
each callback
>receives as input the result of the previous successful operation, so you can go forward and do something
else to it.
2.Each .then() block returns another promise, meaning that you can chain multiple .then() blocks onto each other,
so multiple asynchronous operations can be made to run in order, one after another.
3.The catch() block at the end runs if any of the .then() blocks fail
