To get the most out of this article, please make sure that you know basics about Synchronous and Asynchronous Programming and, if possible, about javascript callbacks.However, I will try to keep most of the stuff away from these topics so that you can understand at least 85% of it. Understanding Promises Suppose a friend comes to you for financial help and you promise him to give some cash after taking it out from an ATM. You go to the ATM, swipe your card, and find out that your account has been frozen due to some reasons and you can't take out your money. Then, you go back to your friend and tell him that you can't give him money because your account is frozen. Hence, breaking your promise. (everythingGoesWell) { theMoney } { } //You have made promise to your friend and you leave for bank if return //Promise is fulfilled else return "Account_Frozen" //Promise failed Promises are used in JavaScript to handle operations. They are special objects that link the actual output (in the above example, it's required money) and the reason due to which we may not get the output (Account Frozen). async States of a Promise A JavaScript is either or . We can use the constructor to create a . promise settled pending Promise promise thePromise = (executor()) var new Promise The executor function is a callback of the promise constructor. It takes two callbacks: and , as arguments. resolve reject The callback is used when the is actually fulfilled. It takes the output value as its argument. resolve promise The callback is used when the couldn't be fulfilled. It takes the reason as its argument. reject promise When we create a it initializes in its state. Once the executor runs, the state changes to which can be either or . promise pending settled resolved rejected Implementation: Code Snippet thePromise = ( { withdraw( { (error) reject (error) resolve (money)
})
}) var new Promise ( ) function resolve,reject // Try to take out money from atm ( ) function error,money // If withdrawal failed, tell why if // else return the money else Promises can be a bit of hectic stuff if you don't have experience with callbacks and callback hells. But once you grasp this concept, there is no going back! The and clauses then catch The function is attached to which executes when the is rejected. It takes the error sent through method as an argument. catch promise promise reject The function is attached to which executes when the is resolved. It sends the value sent through method as an argument. then promise promise resolve There is a clause too. It is executed no matter the resolves or rejects. It takes no arguments. finally promise thePromise = ( { withdraw( { (error) reject (error) resolve (money)
})
})

thePromise.then( { })

thePromise.catch( { })

thePromise.finally( { }) var new Promise ( ) function resolve,reject // Try to take out money from atm ( ) function error,money // If withdrawal failed, tell why if // else return the money else ( ) function money // This function is executed when the above promise resolves and returns an //amount of money ( ) function error // This function is executed when the above promise rejects due to an error ( ) function // This function is executed after the promise is resolved or rejected. Thank You! Feedback, suggestions and corrections are highly appreciated. Please write in comments %-) Jaskirat S. Grewal (@thejscode) Previously published at https://dev.to/thejscode/javascript-promises-for-beginners-31aj

Keep

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

JavaScript Promises from Scratch

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps