Blog for web developers

Promise to replace callbacks function

Promise are the newly improved function Promise to replace callbacks in JavaScript. Generally we use callback function to do something when previously initiated function completed. To write code in Promises, we also need to write promised based function. Normal function might not worked with the Promises. For eg: Please see the below code.

let cleanRoom = () => {
	return new Promise((resolve,reject)=>{
		resolve("Cleaned the room");
	})
}

let removeGarbage = () => {
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			resolve("Garbage is removed...");
		},5000)
	})
}

let winIceCream = ()=>{
	return new Promise((resolve,reject)=>{
		resolve("You have won the Ice Cream");
	})
}

The above functions are promised based. We simply return a new Promised and tell the function that whenever the data is executed we assigned it to resolve() method which is associated with the promised. So only after the resolve is returned the job of promise is done and will move to the second function. So now I have created only function. I will show you show to executed them manually one by one.

cleanRoom().then((res)=>{
	console.log(res)
	return removeGarbage();
}).then((res)=>{
	console.log(res)
	return winIceCream();
}).then((res)=>{
	console.log("You have won the Ice cream. Congratulations");
});

As you can see above, after calling cleanRoom() function I concatenated `then` method to return the results from the cleanRoom() function. So after the function is called we call another function named as removegarbage(). Similarly we return the last function called winIceCream(). Then we return a text message that says we have executed all the function manually. The overall code may looks like this.

let cleanRoom = () => {
	return new Promise((resolve,reject)=>{
		resolve("Clenaed the room");
	})
}

let removeGarbage = () => {
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			resolve("Garbage is removed...");
		},5000)
	})
}

let winIceCream = ()=>{
	return new Promise((resolve,reject)=>{
		resolve("You have won the Ice Cream");
	})
}


cleanRoom().then((res)=>{
	console.log(res)
	return removeGarbage();
}).then((res)=>{
	console.log(res)
	return winIceCream();
}).then((res)=>{
	console.log("You have won the Ice cream. Congratulations");
});

Now if we want to return all the function and then only return another message then we could do like this.

Promise.all([cleanRoom(), removeGarbage(), winIceCream()]).then((res)=>{
	console.log(res+" Everything is done.");
})

This will simply call all the function named as cleanRoom(), removegarbage(), and winIceCream() and after that it will print the message saying “Everything is done”.

Credit link

Santosh Shah

I am a JavaScript developer having enthusiasm on most frontend skills like JavaScript, HTML, CSS, SASS, node, gulp, angular etc. I love exploring new techniques and like to learn new technologies to keep my self up to date.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.