Restangular: Waiting for resolve of promise?

Question

I'm new to Javascript and AngularJS and this one makes me scratch my head :/

Precondition

• A REST Service providing my data from the backend
• AngularJS 1.2.21 and Restangular 1.4.0
• An AngularJS controller, that shall ask the service for a spiced up version of the provided

What I have

This is the method in question:

   service.getSlices = function() {

        Restangular.all('entries').getList().then(function(entries) {

            //some rather complex modification of the backend data go here
            //...

            return  resultOfModification; //this is what should be returned for getSlices();
        })

        //I want the resultOfModification to be returned here


    };

The question

Bascially I would like to wait in getSlices() until the promise is resolved in order to return my resultOfModification only when it actually is calculated.

Additional scenario
I could also image to return a promise from getSlices() which would then provide the resultOfModification. However I fear I do not understand this well enough and / or am too frustrated / tired meanwhile.

Answers and any suggestions are welcome, especially pointers to good reading material. Thanks

Answer 1

You can't return it at that place as actual value, because Restangular is async (the function getSlices is left before the callback you pass to then is called). That's why Promise is used.

Even if it would be possible to make Restangular to be sync you shouldn't do that because this will block the browser until the data is requested which will be a bad user experience.

You should try to get into Promise as they where designed to look like sync code but behave async.

The thing you would need to change in your code is to add a return before the Restangular.all :

  service.getSlices = function() {
      return Restangular.all('entries').getList().then(function(entries) {

          //some rather complex modification of the backend data go here
          //...

          return  resultOfModification; //this is what should be returned for getSlices();
      })
  };

This will return the Promise that is return by the .then call. This Promise will resolve to resultOfModification as this is the vale you return form its callback.

That way you could use getSlices that way:

  service.getSlices().then(function(modifiedData) {

  });

---

Promises can be chained up:

  (new Promise(function( resolve, reject){
    setTimeout(function() {
      resolve("some");
    },200);
  }))
  .then(function(data) {
    return data+' data';
  })
  .then(function(data) {
    //here a Promise is return which will resovle later (cause of the timeout)
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve(data+' !!!!!!');
      },200);
    });
  })
  .then(function(data) {
    //this will have 'some data !!!!!!'
    console.log(data);
  });

Which would be the same as if you would write it that way:

  var promiseA = new Promise(function( resolve, reject){
    setTimeout(function() {
      resolve("some");
    },200);
  });

  var promiseB = promiseA.then(function(data) {
    return data+' data';
  })


  var promiseC = promiseB.then(function(data) {
    //here a Promise is return which will resovle later (cause of the timeout)
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve(data+' !!!!!!');
      },200);
    });
  });

  var promiseD = promiseC.then(function(data) {
    //this will have 'some data !!!!!!'
    console.log(data);
  });