如何避免表加载过时的搜索查询答案

【问题标题】：How to Avoid Table Loading Stale Search Queries如何避免表加载过时的搜索查询
【发布时间】：2020-01-02 00:13:20
【问题描述】：

我有一个通过 REST 端点执行简单搜索的 web 应用程序。每个搜索都有 0 个或多个参数。如何防止这种情况发生？

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

此时，用户希望看到“B”的结果，但根据搜索返回的顺序，可能会显示任一结果。如何防止搜索结果“A”填充表格？

我正在考虑从搜索词创建哈希，将哈希与搜索请求一起发送，并将返回值中的哈希与最近提交的搜索条件的哈希进行比较，并且仅在以下情况下加载请求结果哈希匹配。

如果以前有人问过这个问题，我很抱歉，但我没能找到它。我正在使用 Angular 1.4 UI 和 Java/Spring 后端。我认为这可能是已建立模式的常见问题。

【问题讨论】：

显示您如何调用服务以及如何处理响应。

标签： java angularjs http search

【解决方案1】：

你可以装饰 $http 并在返回的 Promise 中添加一个 abort 方法。这将允许您在实现中检查您的 Promise 并使用 abort() 取消先前的 Promise 请求（下面的 doc 块中的实现示例）。

;(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);

【讨论】：