Angular - 使用 Restangular 时中止 ajax 请求答案

【问题标题】：Angular - abort ajax request when using RestangularAngular - 使用 Restangular 时中止 ajax 请求
【发布时间】：2021-11-30 22:57:13
【问题描述】：

我有一个调用 Angular 服务并因此通过该服务发出 ajax 请求的方法。我需要确保如果多次调用此请求，则先前的请求已中止（如果尚未解决）。

这个方法可以被多次调用。这个方法其实来自ngTableParams上的ngTable：

getData = function($defer, params) {

      myService.getRecord(params).then(function(res){ 
             ...
             $defer.resolve(res.Records);
      }); 
}

这是服务上的方法：

this.getRecords = function(params) {
    ...

    return Restangular
          .all('/api/records')
          .post(filters);
};

如果 ngTable 进行 3 次调用，我希望前 2 次调用被中止（当然，除非它们返回得太快以至于解决了）

【问题讨论】：

标签： angularjs restangular

【解决方案1】：

您可以通过 timeout 配置属性中止 $http 调用，该属性可以是 Promise，在解决时中止请求。

所以在restangular中，你可以这样做

var abort = $q.defer();
Restangular.one('foos', 12345).withHttpConfig({timeout: abort.promise}).get();
abort.resolve();

例如，要将其与您的用例集成，您可以在您的服务中使用它：

var abortGet;

this.getRecords = function(params) {
  ...
  if (abortGet) abortGet.resolve();
  abortGet = $q.defer();
  return Restangular
    .all('/api/records')
    .withHttpConfig({timeout: abortGet.promise})
    .post(filters);
}

这样调用getRecords 总是会中止之前的调用，如果还没有解决！

【讨论】：

谢谢，我没有提到，但我已经知道它是通过超时承诺完成的。我包含了我自己的代码，因为我看不出它如何真正适合我的用例来完成我想要做的事情。

【解决方案2】：

如果您想在更改 UI 路由器的状态时中止所有 http 请求，这是另一种方法：

angular
    .run(function(HttpHandlerSrv) {
        HttpHandlerSrv.abortAllRequestsOn('$stateChangeSuccess');
        HttpHandlerSrv.R.setFullRequestInterceptor(function(element, operation, route, url, headers, params, httpConfig) {
            httpConfig = httpConfig || {};
            if(httpConfig.timeout === undefined) {
                httpConfig.timeout = HttpHandlerSrv.newTimeout();
            }
            return { element: element, params: params, headers: headers, httpConfig: httpConfig };
        });
    })

    .factory('HttpHandlerSrv', HttpHandlerSrv);


    /** ngInject */
    function HttpHandlerSrv($q, $rootScope, Restangular) {
        var requests = [];

        return {
            R: Restangular,
            newTimeout: newTimeout,
            abortAllRequests: abortAllRequests,
            abortAllRequestsOn: abortAllRequestsOn
        };

        function newTimeout() {
            var request = $q.defer();
            requests.push(request);
            return request.promise;
        }

        function abortAllRequests() {
            angular.forEach(requests, function(request) {
                request.resolve();
            });
            requests = [];
        }

        function abortAllRequestsOn(event) {
            $rootScope.$on(event, function(event, newUrl, oldUrl) {
                if(newUrl !== oldUrl) { abortAllRequests(); }
            });
        }
    }

【讨论】：