Javascript Asynchronous: Understanding the Basics
19 February, 2023
1
1
0
Contributors
In programming, there are two ways to run a program: Synchronous and Asynchronous. Synchronous means the program runs sequentially, while Asynchronous means the program runs together.
Sometimes, in the program we create, there is a syntax that requires the code on that line to be executed first before executing the syntax on the next line. This is known as blocking. Conversely, non-blocking means the program runs by executing syntax from line to line in parallel (together).
setTimeout(function(){
console.log("execute later")
},3000);
console.log("execute first")If we run the program above, what will appear first on the console is "executed first," even though the syntax is written after the setTimeout function. The setTimeout function above is an example of an asynchronous function in JavaScript.
The way to handle Asynchronous such as the setTimeout function is with Callback or with Promise.
Callback
A Callback is a function that is called when another function completes its program. A simple example of a Callback is in the setTimeout function above. The setTimeout function accepts two parameters, namely a callback and waits time (timeout). The function runs the timeout first, then when the set time has passed, the callback function is called.
function checkBankQueue(number,callback){
if(number > 50){
callback(true);
}else if(number < 10){
callback(false);
}
}
Suppose we want to see a bank whose queue is often long and who uses queue numbers through online ordering. After registering online, we make a reservation and wait for the queue number. The function above receives a queue number parameter and a callback. A condition check is performed if the queue number is greater than 50, it is better to go for a walk than to wait, but if the queue number is less than 10, of course, we must be on standby again at the bank to be called.
checkBankQueue(65, (check) => {
if(check){
console.log(" my turn is come");
}else{
console.log(" i'll take a walk");
}
}Because we don't want to wait, we use a callback to check whether the queue number is still long or not. So when checked, it turns out that the queue number is still long, then the return result (callback) from the checkBankQueue function is false (check = false), conversely, if it is almost time, a callback with a value of true (check = true) will be given.
When running the checkBankQueue function, the first parameter is given as the queue number 65, and the second parameter is a function declaration that is a callback. As already declared in checkBankQueue that the callback is called with one boolean parameter.
Promise
The promise means a promise, as its name suggests. Like a promise that takes time and can be fulfilled (resolve) or rejected (reject). For example, As an example, there is a man who made a promise to his partner that he will marry her. If the man remains faithful, then the promise will be fulfilled, but if the man cheats, then the promise will be rejected.
Creating Promise
To create a promise, we need to instantiate a Promise class. This class is already provided in JavaScript. The parameter passed when instantiating the Promise class is a function that receives two parameters, resolve and reject.
var manIsNotCheating = false;
let willMarryHer = new Promise(function(resolve,reject){
if(manIsNotCheating){
let marry = {
date: '30 February 2023',
party: true,
}
resolve(marry);
}else{
let reason = new Error("All men are the same");
reject(reason);
})Running the Promise Running a promise is like asking for a promise that has been made.
const askHer = () => {
willMarryHer.then((fulfilled) => {
console.log(fulfilled); // {date: '30 February 2023',party: true}
}).catch((error) => {
console.log(error.message); // "All men are the same"
})
}
askHer();To fulfill the promise, we create a function called askHer that asks for the promise willIMarryHer. When the man asks for the promise using the askHer() function, the promise willIMarryHer is called and has two methods, then and catch. Both the .then() and .catch() methods receive a function parameter. The resolve function that is executed when the promise is declared will send a new phone and is caught in the .then() method. Meanwhile, the reject on the promise declaration will send an error message or reason why the promise was rejected and is caught in the .catch() method.