Search code examples
firebasepromisepolymerfirebase-realtime-databasepolymerfire

Need help understanding this promise and handling the error


I am saving some data into my Firebase database inside my Polymer element. All works fine. But as I person who's new to Promises I need help to understand what Promise.resolved() means here at then end of the method. Isn't the promise going through before that when .then is used? So what exactly this is doing? I looked around but can't find an example of resolved() with no value.

And how can I change this to have more familiar structure as below:

.then(function(snapshot) {
  // The Promise was "fulfilled" (it succeeded).
}, function(error) {
  // The Promise was rejected.
});

Here's the block and the Promise.resolved() taken from the documentation:

saveData : function() {          
          this.$.document.data = this.$.message.value; 
          this.$.document.save("/parent", "child").then(function() {
            console.log('sent the event!!!!!!');
            this.$.document.reset();
          }.bind(this));

         return Promise.resolve();
        },

Solution

  • First you need to understand the basics of Promises.

    Lets start from very basics -

    A newly created es6 promise is in one of the following states:

    • resolved
    • rejected
    • pending --> waiting to either resolved or rejected

    Lets create a sample Promise

    var promise = new Promise(function(fulfill, reject) {
      // Do some stuff and either fullfill or reject the promise
    });
    

    So above promise receives a callback function also called executor function with signature function(fullfill, reject).

    A newly created promise also has a very important property function called then used for chaining and controlling the logic flows.

    then takes two optional callback parameters onFulfilled and onRejected.

    Inside this executor function two things happens to indicate the outcome of promise -

    • fullfill method gets called with or without a value:

      means operation completed successfully. If you call fulfill with a value then onFulfilled callback in then will receive that value, if you decided not to provide a value in fulfill call then onFulfilled will be called with a parameter undefined.

      var promise = new Promise(function(fulfill, reject) {
         // lets assume operation completed successfully
         fulfill('Success');
      });
      
      promise.then(onFulfilled, onRejected);
      
      function onFulfilled(result) {
           console.log(result);
           // Success will be printed
      }
      
    • reject method gets called with or without a value:
      Some problem occurred while performing the operation. You can decided whether pass some error message reject callback to indicate the error occurred to end user.

      var promise = new Promise(function(fulfill, reject) {
         // lets assume operation did not complete successfully
         reject(new Error('Error'));
      });
      
      promise.then(onFulfilled, onRejected);
      
      function onRejected(error) {
           console.log(error.message);
           // Error message will be printed
      }
      

    Now lets talk about Promise.resolve.

    At the top you learned how to create promise through the constructor.

    var promise = new Promise(function (fulfill, reject) {
      fulfill('Success value');
    });
    
    // Now: Promise.resolve
    // Exactly does the same thing as above code
    
    var promise = Promise.resolve('Success value');
    

    Similarly comes Promise.reject -

    var promise = new Promise(function (fulfill, reject) {
      reject(new Error('Error VALUE'));
    });
    
    var promise = Promise.reject(new Error('Error VALUE'));
    

    In your case save seems to be returning a promise already and internally that promise may be calling either fulfill or reject method so you don't need to call Promise.resolve(). You just need to get the values returned by that promise either fulfilled value or rejected value in the then method.

     saveData : function() {          
          this.$.document.data = this.$.message.value; 
          // return this promise
          return this.$.document.save("/parent", "child");
     }
    
    saveData()
    .then(function() {
            console.log('sent the event!!!!!!');
            this.$.document.reset();
          }.bind(this));
    

    I hope it makes things about promises somewhat clearer.