Is Restangular taking forever to resolve the promise?

Question

Is Restangular taking forever to resolve the promise?

Just starting out with JavaScript and AngularJS, and this particular issue has me stumped.

Requirements

A RESTful service that retrieves data from the backend
AngularJS 1.2.21 and Restangular 1.4.0 being used
An AngularJS controller tasked with requesting an enhanced version of the provided data from the service

Current Setup

The method causing confusion is as follows:

   service.getSlices = function() {

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

            // complex modifications to the data take place here
            // ...

            return resultOfModification; // intended returned value for getSlices();
        })

        // need to ensure resultOfModification is returned here

    };

The Dilemma

Essentially, I want `getSlices()` to wait until the promise is resolved before returning `resultOfModification` once it's computed.

Another Approach
I have considered returning a promise from `getSlices()` which would deliver `resultOfModification`. However, my understanding may not be sufficient enough at the moment due to frustration or exhaustion.

Any answers or suggestions are greatly appreciated, especially recommendations on helpful resources. Thank you!

javascript angularjs promise restangular

Answer 1

Answer №1

It's not possible to return the actual value in that place because Restangular operates asynchronously (the function getSlices moves on before the callback you provide to then is executed). That's why it's recommended to utilize Promise.

Even if synchronous behavior could be forced upon Restangular, it's advised against due to the negative impact it would have on user experience by blocking the browser until the data is fetched.

It's important to familiarize yourself with Promise as they were developed to resemble synchronous code while functioning asynchronously.

To make a necessary change in your code, add a return before Restangular.all:

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

          // complex modifications to backend data go here
          //...

          return resultOfModification; //this should be the returned value for getSlices();
      })
  };

This will return the Promise from the .then call. The Promise resolves to

resultOfModification</code which is what is returned from its callback.</p>

<p>You can then use <code>getSlices

like this:

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

  });

Promises can be chained together:

  (new Promise(function( resolve, reject){
    setTimeout(function() {
      resolve("some");
    },200);
  }))
  .then(function(data) {
    return data+' data';
  })
  .then(function(data) {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve(data+' !!!!!!');
      },200);
    });
  })
  .then(function(data) {
    console.log(data);
  });

This is equivalent to:

  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) {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve(data+' !!!!!!');
      },200);
    });
  });

  var promiseD = promiseC.then(function(data) {
    console.log(data);
  });

Answer 2

It's not possible to return the actual value in that place because Restangular operates asynchronously (the function getSlices moves on before the callback you provide to then is executed). That's why it's recommended to utilize Promise.

Even if synchronous behavior could be forced upon Restangular, it's advised against due to the negative impact it would have on user experience by blocking the browser until the data is fetched.

It's important to familiarize yourself with Promise as they were developed to resemble synchronous code while functioning asynchronously.

To make a necessary change in your code, add a return before Restangular.all:

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

          // complex modifications to backend data go here
          //...

          return resultOfModification; //this should be the returned value for getSlices();
      })
  };

This will return the Promise from the .then call. The Promise resolves to

resultOfModification</code which is what is returned from its callback.</p>

<p>You can then use <code>getSlices

like this:

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

  });

Promises can be chained together:

  (new Promise(function( resolve, reject){
    setTimeout(function() {
      resolve("some");
    },200);
  }))
  .then(function(data) {
    return data+' data';
  })
  .then(function(data) {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve(data+' !!!!!!');
      },200);
    });
  })
  .then(function(data) {
    console.log(data);
  });

This is equivalent to:

  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) {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve(data+' !!!!!!');
      },200);
    });
  });

  var promiseD = promiseC.then(function(data) {
    console.log(data);
  });

Is Restangular taking forever to resolve the promise?

Answer №1

Similar questions

Leveraging Bootstrap grid system within AngularJS elements

Add items to a separate array only if the material UI checkbox is selected

Repetitively showcasing data in asp.net mvc

Implement an onClick event to the newly created th element using document.createElement()

A malfunction report stemming from an HTTP error code while using react.js/javascript

What causes my Excel file to become corrupted when inputting new data?

Exploring Angular testing by using mock services to simulate the behavior of other services

How to Validate Response/ Data value from PHP using Ajax

JavaScript does not allow executing methods on imported arrays and maps

Setting the root position of a div: How can it be done?

Instructions for activating a button in the absence of any inputs

Attempted to fetch information using Ajax in Grails

Enhancing parent component props in React-router-dom: A guide to updating them

What is the reason for AngularJS not utilizing the most recently assigned value?

Pressing a key once causing two actions when managing content in a separate window

Formik causing malfunction in MUI DatePicker functionality

Error in Typescript: Attempting to access the property 'set' of an undefined value

Enhancing a Dropdown List with Jquery Using JSON Data

Hmm, I seem to be encountering an error where res.sendStatus is not recognized as a function. What could be causing this

Tips for maintaining server session by tracking user activity on the browser using a simple ajax request to the server without relying on JQuery