JavaScript | Promises

Promises are used to handle asynchronous operations in JavaScript. They are easy to manage when dealing with multiple asynchronous operations where callbacks can create callback hell leading to unmanageable code.

Prior to promises events and callback functions were used but they had limited functionalities and created unmanageable code.
Multiple callback functions would create callback hell that leads to unmanageable code.
Events were not good at handling asynchronous operations.

Promises are the ideal choice for handling asynchronous operations in the simplest manner. They can handle multiple asynchronous operations easily and provide better error handling than callbacks and events.

  • Benefits of Promises

    1. Improves Code Readability
    2. Better handling of asynchronous operations
    3. Better flow of control definition in asynchronous logic
    4. Better Error Handling
  • A Promise has four states:

    1. fulfilled: Action related to the promise succeeded
    2. rejected: Action related to the promise failed
    3. pending: Promise is still pending i.e not fulfilled or rejected yet
    4. settled: Promise has fulfilled or rejected
  • A promise can be created using Promise constructor.

    Syntax

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

    Parameters

    • Promise constructor takes only one argument,a callback function.
    • Callback function takes two arguments, resolve and reject
    • Perform operations inside the callback function and if everything went well then call resolve.
    • If desired operations do not go well then call reject.

    Example

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    var promise = new Promise(function(resolve, reject) {
      const x = "geeksforgeeks";
      const y = "geeksforgeeks"
      if(x === y) {
        resolve();
      } else {
        reject();
      }
    });
      
    promise.
        then(function () {
            console.log('Success, You are a GEEK');
        }).
        catch(function () {
            console.log('Some error has occured');
        });

    chevron_right

    
    

    Output:

    Success, You are a GEEK
  • Promise Consumers

    Promises can be consumed by registering functions using .then and .catch methods.

    1. then()
      then() is invoked when a promise is either resolved or rejected.
      Parameters:
      then() method takes two functions as parameters.

      1. First function is executed if promise is resolved and a result is received.
      2. Second function is executed if promise is rejected and an error is received. (It is optional and there is a better way to hanlde error using .catch() method

      Syntax:

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

      Example: Promise Resolved

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

      Output:

      Geeks For Geeks

      Examples: Promise Rejected

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      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);
          })

      chevron_right

      
      

      Output:

      Promise Rejected
    2. catch()
      catch() is invoked when a promise is either rejected or some error has occured in execution.
      Parameters:
      catch() method takes one function as parameter.

      1. Function to handle errors or promise rejections.(.catch() method internally calls .then(null, errorHandler), i.e. .catch() is just a shorthand for .then(null, errorHandler) )

      Syntax:

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

      Examples: Promise Rejected

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

      Output:

      Promise Rejected

      Examples: Promise Rejected

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

      Output:

      Error: Some error has occured
  • Applications

    1. Promises are used for asynchronous handling of events.
    2. Promises are used to handle asynchronous http requests.

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.