How to Avoid Table Loading Stale Search Queries

Question

I have a webapp which has performs a simple search via a REST endpoint. Each search has 0 or more arguments. How do I prevent this scenario?

User submits search request "A"
Before allowing "A" to return they modify their request and submit a new search request "B"

At this point the user expects to see the results for "B" but depending on what order the searches return either one may be displayed. How do I prevent the search results from "A" populating the table?

I am thinking about creating a hash from the search terms, sending the hash along with the search request, and comparing the hash in the return value to the hash of the most recently submitted search criteria, and only loading the request results if the hashes match.

I apologize if this question has been asked before, but I wasn't able to find it. I am using Angular 1.4 UI and a Java/Spring backend. I figure this might be a common problem with an established pattern.

Answer 1

You can decorate $http and add an abort method to the returned promise. This will allow you to check your promise in implementation and use the abort() to cancel the previous promise request (implementation example in the doc block below).

;(function(angular, undefined) {

  angular.module('app.appConfigs')
    .config(httpDecoratorConfig);

  function httpDecoratorConfig($provide) {
    $provide.decorator('$http', decorateHttpWithAbort);
  }

  /**
   * decorate $http response promise with an abort function.
   * use this on destroy where you want to abort the outstanding request made on
   * a page before leaving the page.
   *
   * @example
      var requestPromise = $http(reqConfig).then(...).catch(...).finally(...);

      $onDestroy() {
        requestPromise.abort();
      }
   */
  function decorateHttpWithAbort(_, $q, $delegate) {
    var originalHttpService = $delegate;

    function newHttpServiceConstructor(requestConfig) {
      var canceller = $q.defer();
      var proxyRequest = $q.defer();
      var onAbortCallback = angular.noop;

      // adding abortFn into request promise
      proxyRequest.promise.abort = function abortFn() {
        canceller.resolve();
      };

      // by using onAbort capture the callback function which will be called
      // when the request is aborted, use this to perform cleanups.
      proxyRequest.promise.onAbort = function onAbortFn(callback) {
        onAbortCallback = callback;
        return this;
      };

      // adding request canceller promise in the original request config.
      requestConfig.timeout = canceller.promise;

      originalHttpService(requestConfig).then(
        function onSuccess() {
          proxyRequest.resolve.apply(this, arguments);
        },
        function onError(resp) {
          // don't resolve the abort response with error instead call provided
          // on abort callback to give user a change to handle abort case.
          // natively angular abort is resolved with error.
          if (resp.status === -1) {
            onAbortCallback();
            return;
          }

          proxyRequest.reject.apply(this, arguments);
        },
        function onNotification() {
          proxyRequest.notify.apply(this, arguments);
        }
      );

      return proxyRequest.promise;
    }

    // inherit all derived methods from original $http like $get, $put etc
    _.assign(newHttpServiceConstructor, originalHttpService);

    return newHttpServiceConstructor;
  }

})(angular);