Promise in JavaScript? How to use Promise?

Promises are used to handle asynchronous operations in JavaScript. They are easy to manage when dealing with many asynchronous operations where callback statements can generate callback-hell resulting in unmanageable code.

Before the Promise event, callback functions were used a lot, but they had limited functionality and produced unmanageable code. Multiple nested callback functions create callback hell that leads to unmanageable code. Events do not handle asynchronous activities well.

Promise is the ideal choice for the simplest handling of asynchronous operations. They can handle many asynchronous operations with ease and provide better error handling capabilities for function callbacks and events .

• Promises’ benefits:
  1. Help the callback function become more obvious
  2. Good handling of asynchronous activities
  3. Better definition of processing threads in asynchronous operations
  4. Error handling is better
• Promises status:
  1. fulfilled : processing involved when the promise was successful
  2. rejected : The handle involved when the promise has failed
  3. pending : The pending Promise, ie no fulfilled or rejected
  4. settled : Promise was fulfilled or rejected
• A Promise can be created by using the Promise constructor
  
  var promise = new Promise(function(resolve, reject){ //do something });

  1 2 3 4

  var promise = new Promise(function(resolve, reject){      //do something });

• Parameters
  • The Promise constructor takes only one argument as a callback function.
  • The callback function accepts two arguments, resolve and reject.
  • Do things inside the callback function, and if everything goes well, call resolve.
  • If the desired operation fails, call reject.

  Here is an example:

  var promise = new Promise(function(resolve, reject) { const a = 'Okay'; const b = 'Okay' if(a === b) { resolve(); } else { reject(); } }); promise. then(function () { console.log('Success.'); }). catch(function () { console.log('Failed.'); });

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  var promise = new Promise(function(resolve, reject) {   const a = 'Okay';   const b = 'Okay'   if(a === b) {     resolve();   } else {     reject();   } });   promise.     then(function () {         console.log('Success.');     }).     catch(function () {         console.log('Failed.');     });

  Output

  Success.

  1 2

  Success.

• Promise is used like? Promises can be used using the .then and .catch methods.1.then ()
  • then () is called when the promise returns to be resolved or rejected.Parameters:

    The .then () method takes two functions as parameters.

    • The first function is executed if the promise is resolved and gets the result.
    • The second function is executed if the promise is rejected and received an error. (There is a better way to fix the error using the .catch () method)

    About the syntax:

    .then(function(result){ //handle success }, function(error){ //handle error })

    1 2 3 4 5 6

    .then(function(result){             //handle success         }, function(error){             //handle error         })

    Promise Rejected Example:

    var promise = new Promise(function(resolve, reject) { resolve('Handle success.'); }) promise .then(function(successMessage) { //success handler function is invoked console.log(successMessage); }, function(errorMessage) { console.log(errorMessage); })

    1 2 3 4 5 6 7 8 9 10 11 12

    var promise = new Promise(function(resolve, reject) {           resolve('Handle success.');       })         promise           .then(function(successMessage) {               //success handler function is invoked               console.log(successMessage);           }, function(errorMessage) {               console.log(errorMessage);           })

    Output

    Handle success.

    1 2	Handle success.

    Promise Rejected Example:

    var promise = new Promise(function(resolve, reject) { reject('Handle error.'); }) promise .then(function(successMessage) { console.log(successMessage); }, function(errorMessage) { //error handler function is invoked console.log(errorMessage); })

    1 2 3 4 5 6 7 8 9 10 11 12

    var promise = new Promise(function(resolve, reject) {           reject('Handle error.');       })         promise           .then(function(successMessage) {               console.log(successMessage);           }, function(errorMessage) {               //error handler function is invoked               console.log(errorMessage);           })

    Output

    Handle error.

    1 2	Handle error.

  2. catch ()

  • catch () is called when the promise rejects or an error occurs on execution.Parameters:

    catch () takes a function as an argument. It’s the error handling function or a reject promise.

    Execution syntax:

    .catch(function(error) { // Handler error })

    1 2 3 4

    .catch(function(error) {         // Handler error     })

    Promise Rejected Example

    var promise = new Promise(function(resolve, reject) { reject('Promise Rejected.'); }) promise .then(function(successMessage) { console.log(successMessage); }, function(errorMessage) { //error handler function is invoked console.log(errorMessage); })

    1 2 3 4 5 6 7 8 9 10 11 12

    var promise = new Promise(function(resolve, reject) {           reject('Promise Rejected.');       })         promise           .then(function(successMessage) {               console.log(successMessage);           }, function(errorMessage) {               //error handler function is invoked               console.log(errorMessage);           })

    Output

    Promise Rejected.

    1 2	Promise Rejected.

    Or is:

    var promise = new Promise(function(resolve, reject) { throw new Error('Some error has occured.') }) promise .then(function(successMessage) { console.log(successMessage); }, function(errorMessage) { //error handler function is invoked console.log(errorMessage); })

    1 2 3 4 5 6 7 8 9 10 11 12

    var promise = new Promise(function(resolve, reject) {           throw new Error('Some error has occured.')       })         promise           .then(function(successMessage) {               console.log(successMessage);           }, function(errorMessage) {               //error handler function is invoked               console.log(errorMessage);           })

    Output

    Some error has occured.

    1 2	Some error has occured.

So how is Promise applied?

• That’s when you want to handle asynchronous events.
• It’s a good solution to avoid callback hell .