➤ Async/await is the syntax used to work with promises to make complex tasks into a comfortable way of code, and easy to write and understand. Async/Await is the extension of promises. They are built on promises, Async functions make the code more readable and are easier to handle than promises. The await keyword ensures that the function waits for the promise to resolve.
⮞ async makes a function return a Promise.
⮞ await makes a function wait for a Promise.
Synchronous Vs Asynchronous JavaScript
➤ Synchronous tasks happen in order, In A systematic way, you must finish task one before moving on to the next one. Asynchronous tasks have no particular order it can be done at a time or can be variance.
➤ Synchronous is referred to as “sync” and asynchronous, is known as “async”.
➤ An example of a Synchronous is talking on the phone. One person speaks another listens & has to give a response after he stops speakings. The communication on phone is fast.
➤ Async is multi-thread, which means operations or programs can run in parallel. Sync is single-thread, so only one operation or program will run at a time.
➤ In Asynchronous, Example Email:- When you receive an email it does not require an immediate response you can give a response later. The communication is delayed. Another Example is "watching a recorded tutorial on youtube". The communication between the speaker & viewer is not there or delayed.
Synchronous code Example
➤ Remember "sync" means in order/Flow. "Async" means not in order or delayed.
---------------Synchronous Example--------------
// I wake up early in the morning.
console.log("I wake up");
console.log("early");
console.log("in the morning.");
// Output:
I wake up
early
in the morning.
Asynchronous code Example
➤ Asynchronous means the process is delayed let's see by using a code Example.
---------------Asynchronous Example--------------
// I wake up early in the morning.
console.log("I wake up");
console.log("early");
// This will console after 3 seconds.
setTimeout(()=>{
console.log("in the morking");
},3000)
// output:
I wake up
early
in the working // shown after 3s.
Async functions
➤ The keyword async before a function makes the function return a promise
async function myFunction() {
return "Hello, wake up early";
}
myFunction().then(console.log); // Hello, wake up early
➤ If we return a promise, instead of directly returning the function it would be the same.
async function myFunction() {
return Promise.resolve("Hello, wake up early");
}
myFunction().then(console.log); // Hello, wake up early
return Promise.resolve("Hello, wake up early"); the output will be the same.
Await functions
➤ The await keyword makes the function pause the execution and wait for a resolved promise.
// works only inside async functions
let value = await promise;
async function myFunction(){
let promise = new Promise((resolve, reject) => {
// after 3 sec
setTimeout(() => resolve("Hello, I wake up early."), 3000)
});
let result = await promise;
console.log(result);
}
myFunction(); //Hello, I wake up early.
➤ Await function is used to wait for the promise. It could be used within the async block only. It makes the code wait until the promise returns a result.
➤ Await suspends the called function execution until the promise returns a result for that execution. If there are other functions called after await, these executions wait until the promise finishes. Await can be used for single or many promises.
➤ What await do is, it makes the function stop for a while till the variable promise is not resolved. It resumes with the promise returns, only after the variable promise is resolved.
➤ Using async and await helps with code readability, and can help users avoid complicated coding outputs.
Conclusion
➤ Using async / await while dealing with promises helps in, clean code and much more easy debugging.
➤ While you are working on big projects using async / await makes it easy to code and neat.
comments are appreciated . Thank you🚀🌸🌷.