JavaScript Async/Await
Async JavaScript helps you break down big complex projects into smaller tasks.
Based on the Tutorial from FreeCodeCamp I will explain the concepts of Callbacks, Promises and Async/Await.
First it’s important to know the difference between an Synchronous and a Asynchronous JavaScript.
- Synchronous tasks are completes one after another. JavaScript is by default Synchronous.
- Asynchronous tasks are completed independently. The data is loading at its own pace. None of them is waiting for any of the others.
What is a CALLBACK?
A callback is when you nest a function inside another function as an argument.
A callback is any function that is called by another function which takes the first function as a parameter. A lot of the time, a callback is a function that is called when something happens. That something can be called an “event” in programmer-speak.
The output of this code will be (after 3 seconds): “The function has been called after 3 seconds”.
In this case the callbackFunc will be called after 3 seconds. The setTimeout function has the callbackFunc as its first parameter and the time “3000ms” as the second, making that a callback function to be executed after 3 seconds.
Promises
A Promise is a special JavaScript object. It produces a value after an asynchronous operation completes successfully, or an error if it does not complete successfully.
A Promise is in one of these states:
- Pending: initial state, neither fulfilled nor rejected.
- Fulfilled: meaning that the operation was completed successfully.
- Rejected: meaning that the operation failed.
In this case, the output of the code will be after 5 seconds “Then Promise is resolved”. First it does the setTimeout function and whenever this is resolved it goes to the .then function doing the console.log of “Then” + “Promise is resolved”.
But… What happens if a promise is rejected?
In this case the output will be “Promise has been catch with an error” and “End”. Since the setTimeout function is not able to be executed because the time parameter has an error the promise is rejected and goes to the .catch function.
Also, there’s the .finally handler which works regardless of whether our promise was resolved or rejected.
Async / Await
We use the try keyword to run our code while we use catch to catch our errors. It’s the same concept we saw when we looked at promises.
The keyword await makes JavaScript wait until a promise settles and returns its result.
In this case the async function test will execute and wait for the promise “message” to be resolved in this case after 3 seconds and afterwords will continue the execution of “D” and “E”.
In conclusion, since a program can have multiple functions it’s important to know the order of the execution of each of them and make sure that they follow the right order to make sure that the code runs propertly.
Also, thanks to FreeCodeCamp to share and create such great articles and tutorials in order to learn all of this concepts for free. Make sure to check their website, you won’t regret it!!
