Understanding Callback, async, and Promise in JavaScript

hello and welcome to my little notes, in this post, I will discuss callback Function, Asynchronous Function, and Promise then implementing in JavaScript with case Study

in this post, I will discuss these topics

• How to Create Callback Function
• How to Create Promise
• How to Create Asynchronous Function
• Fetch API request with Asynchronous Function

now let’s get started

Callback

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action, for example when you want to process asynchronous data or data that cannot be directly obtained

const callData = callback => {
setTimeout(() => {
callback("feri")
}, 5000)
};
// calling callback
callData(name => console.log(name));

execute this code wait in 5 seconds and see the result

output example callback

Promise

the promise is an alternative for processing data asynchronously, one of the advantages of promises is having a chaining method for processing data, for example

const firstName = () => {
return new Promise(resolve => {
setTimeout(() => {
const name_data = "feri";
resolve(name_data);
}, 3000)
})
};
const lastName = (first) => {
return new Promise(resolve => {
setTimeout(() => {
const last = "Lukmansyah";
resolve(`${first} ${last}`);
}, 2000)
})
};
// call promise
firstName().then(data => lastName(data).then(result => console.log(result)));

execute this code and wait for 5 seconds and see the result

promise example

different from the callback, with this promise we can combine the sign function to write a callback in each method/function

if using callback for example like this

const callData = (callback) => {
setTimeout(() => {
const first = "feri"
callback(first)
}, 3000)
};
const callDataAgain = (firstName, callback) => {
setTimeout(() => {
const last = `${firstName} lukmansyah`;
callback(last)
}, 3000)
};
// call function
callData(name => callDataAgain(name, result => console.log(result)));

Asynchronous Function

An async/asynchronous function is a function declared with the async keyword, and the keyword is permitted within them. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains. for example

const firstName = () => {
return new Promise(resolve => {
setTimeout(() => {
const f_name = "feri";
resolve(f_name)
}, 3000)
})
};
const lastName = () => {
return new Promise(resolve => {
setTimeout(() => {
const l_name = "Lukmansyah"
resolve(l_name)
}, 3000)
})
};
// async func
const resultName = async () => {
const first = await firstName();
const last = await lastName();
const names = first + ' ' + last;
return `my name is ${names}`;
};
// call async
resultName().then(result => console.log(result));

here is the result for this code

asynchronous function result

Using Async Function to Fetch API

now with a little case study, we will create an asynchronous function that will be used to make requests to the API, in this case we will use the dummy API from https://jsonplaceholder.typicode.com/

for that install the node-fetch package to make the request to Dummy API, install with this command

npm install node-fetch --save-dev

argument --save-dev for save this package as development dependencies

and after the package installed create a function like this

// init fetch
const fetch = require("node-fetch");
// call API using fetch
const callData = async () => {
const data = await fetch("https://jsonplaceholder.typicode.com/todos/");
return data.json()
};
// call data
callData().then(result => console.log(result))

and execute you will show this response

fetch API result

that’s all for the discussion this time, thank you for reading my little documentation, hopefully, it’s useful and good luck, Feri Lukmansyah