Cancel the search request in Angular and Restangular if a newer one is received

Question

Cancel the search request in Angular and Restangular if a newer one is received

Recently, I've encountered a slow server while trying to pull data from a service using a restangular call. In light of this, I'm exploring ways to potentially abort the call (or just the promise) if a newer call is made, allowing my service to use the most up-to-date information available. Here's the snippet of code for the service call:

  MySearchService.prototype.search = function(query) {

           return $q(function(resolve, reject) {
               var url = '/services/search';
               Restangular.oneUrl(url, url)
                    .customPOST(query)
                    .then(resolve)
                    .catch(reject);
           });
  };

I had an idea like this:

.withHttpConfig({hasNewSearch: abort.promise}) <<not sure you can put custom key in here
abort.resolve();

However, I am unsure if that's the correct way to approach it. Is there a way to cancel the call if a newer request is initiated? It might be related more to the promise aspect rather than restangular itself. Any insights or advice on this matter would be greatly appreciated. Thank you!

javascript angularjs promise restangular

Answer 1

Answer №1

This problem is actually quite interesting and is commonly referred to as last or flatMapLatest.

// Here we need a solution that focuses on the last result of a function
function lastResult(fn){ // fn returns a promise
  var lastResultValue = null; // the last promise to compare with
  return function(){ 
    // execute the function and update it as the latest call
    lastResultValue = fn.apply(this, arguments); 
    var p = lastResultValue;
    return p.then(function verifyLast(v){ // execute the function upon resolution
        if(p === lastResultValue){ // check if we are still the "last call" when resolved
            return v; // successful execution
        } else {
            // a newer call took place, resolve with its result and ensure no other calls occurred
            return lastResultValue.then(verifyLast);
        }
    });
}

With this implementation, you can use it in scenarios like

MyDataService.prototype.getData = lastResult(function(query) {
           // updated the approach
           return Restangular.oneUrl('/services/data', '/services/data')
                             .customPOST(query);
});

Answer 2

This problem is actually quite interesting and is commonly referred to as last or flatMapLatest.

// Here we need a solution that focuses on the last result of a function
function lastResult(fn){ // fn returns a promise
  var lastResultValue = null; // the last promise to compare with
  return function(){ 
    // execute the function and update it as the latest call
    lastResultValue = fn.apply(this, arguments); 
    var p = lastResultValue;
    return p.then(function verifyLast(v){ // execute the function upon resolution
        if(p === lastResultValue){ // check if we are still the "last call" when resolved
            return v; // successful execution
        } else {
            // a newer call took place, resolve with its result and ensure no other calls occurred
            return lastResultValue.then(verifyLast);
        }
    });
}

With this implementation, you can use it in scenarios like

MyDataService.prototype.getData = lastResult(function(query) {
           // updated the approach
           return Restangular.oneUrl('/services/data', '/services/data')
                             .customPOST(query);
});

Cancel the search request in Angular and Restangular if a newer one is received

Answer №1

Similar questions

Angular - Implement $sanitize for all user inputs

When a StaticFiles instance is mounted, FastAPI will issue a 405 Method Not Allowed response

Using MUI and React, receive multiple files and track their status changes in a form

ReserveYourSpot: Effortless Seat Reservation with AngularJS at the Click of a Button [GIF]

Getting the true height without needing jQuery

Eliminate any repeated elements within the nested arrays found within an array of objects

Refreshing Slickgrid: Updating grid data with data fetched from an AJAX source

Is there a way to send a variable to PHP and execute it on the current page?

What is the process for capturing input values when the enter key is pressed?

Choose an option to modify the URL

"Applying CSS styles to highlighted text using jQuery - how can I do it

Filtering in AngularJS using the ng-repeat directive allows you to iterate over an object

Is there a way to quickly convert a deconstructed object into a specific type with just one

Obtaining information from a local JSON file in AngularJS

What is the best way to dynamically assign classes to a single <li> element in Meteor when an event occurs?

Is there a way to transform a dynamically created JavaScript table into JSON or XML format and then store it as a file?

Using an array that is returned from a function in Node.js: a beginner's guide

In React/JavaScript, the array variable defined outside the component is having props added to it multiple times

Tips for customizing the cursor to avoid it reverting to the conventional scroll cursor when using the middle click

Yeoman - A guide for integrating an express server task into Gruntfile.js from the generator-angular template