如何在AngularJS中取消$ http请求?

在AngularJS中给定一个Ajax请求

$http.get("/backend/").success(callback); 

如果发起另一个请求(相同的后端,例如不同的参数),取消该请求最有效的方法是什么。

    通过超时参数将此function添加到1.1.5版本中 :

     var canceler = $q.defer(); $http.get('/someUrl', {timeout: canceler.promise}).success(successCallback); // later... canceler.resolve(); // Aborts the $http request if it isn't finished. 

    当前版本的AngularJS不支持取消$http发出的请求。 有一个pull请求打开来增加这个function,但是这个PR还没有被审查,所以目前还不清楚它是否会把它变成AngularJS的核心。

    取消Angular $ http Ajax的超时属性在Angular 1.3.15中不起作用。 对于那些不能等待这个被修复的问题,我正在分享一个包装在Angular中的jQuery Ajax解决scheme。

    解决scheme涉及两项服务:

    • HttpService(jQuery Ajax函数的封装);
    • PendingRequestsService(跟踪未决/打开的Ajax请求)

    这里是PendingRequestsService服务:

      (function (angular) { 'use strict'; var app = angular.module('app'); app.service('PendingRequestsService', ["$log", function ($log) { var $this = this; var pending = []; $this.add = function (request) { pending.push(request); }; $this.remove = function (request) { pending = _.filter(pending, function (p) { return p.url !== request; }); }; $this.cancelAll = function () { angular.forEach(pending, function (p) { p.xhr.abort(); p.deferred.reject(); }); pending.length = 0; }; }]);})(window.angular); 

    HttpService服务:

      (function (angular) { 'use strict'; var app = angular.module('app'); app.service('HttpService', ['$http', '$q', "$log", 'PendingRequestsService', function ($http, $q, $log, pendingRequests) { this.post = function (url, params) { var deferred = $q.defer(); var xhr = $.ASI.callMethod({ url: url, data: params, error: function() { $log.log("ajax error"); } }); pendingRequests.add({ url: url, xhr: xhr, deferred: deferred }); xhr.done(function (data, textStatus, jqXhr) { deferred.resolve(data); }) .fail(function (jqXhr, textStatus, errorThrown) { deferred.reject(errorThrown); }).always(function (dataOrjqXhr, textStatus, jqXhrErrorThrown) { //Once a request has failed or succeeded, remove it from the pending list pendingRequests.remove(url); }); return deferred.promise; } }]); })(window.angular); 

    在你加载数据的时候,你可以使用HttpService而不是$ http:

     (function (angular) { angular.module('app').service('dataService', ["HttpService", function (httpService) { this.getResources = function (params) { return httpService.post('/serverMethod', { param: params }); }; }]); })(window.angular); 

    后来在你的代码中,你想加载数据:

     (function (angular) { var app = angular.module('app'); app.controller('YourController', ["DataService", "PendingRequestsService", function (httpService, pendingRequestsService) { dataService .getResources(params) .then(function (data) { // do stuff }); ... // later that day cancel requests pendingRequestsService.cancelAll(); }]); })(window.angular); 

    出于某种原因,config.timeout不适用于我。 我使用这种方法:

     let cancelRequest = $q.defer(); let cancelPromise = cancelRequest.promise; let httpPromise = $http.get(...); $q.race({ cancelPromise, httpPromise }) .then(function (result) { ... }); 

    如果你想通过ui-router取消stateChangeStart的挂起请求,你可以使用如下所示:

    //在服务中

      var deferred = $q.defer(); var scope = this; $http.get(URL, {timeout : deferred.promise, cancel : deferred}).success(function(data){ //do something deferred.resolve(dataUsage); }).error(function(){ deferred.reject(); }); return deferred.promise; 

    / /在UIrouterconfiguration

     $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { //To cancel pending request when change state angular.forEach($http.pendingRequests, function(request) { if (request.cancel && request.timeout) { request.cancel.resolve(); } }); }); 

    这通过使用中止方法来装饰$ http服务来增强接受的答案,如下所示…

     'use strict'; angular.module('admin') .config(["$provide", function ($provide) { $provide.decorator('$http', ["$delegate", "$q", function ($delegate, $q) { var getFn = $delegate.get; var cancelerMap = {}; function getCancelerKey(method, url) { var formattedMethod = method.toLowerCase(); var formattedUrl = encodeURI(url).toLowerCase().split("?")[0]; return formattedMethod + "~" + formattedUrl; } $delegate.get = function () { var cancelerKey, canceler, method; var args = [].slice.call(arguments); var url = args[0]; var config = args[1] || {}; if (config.timeout == null) { method = "GET"; cancelerKey = getCancelerKey(method, url); canceler = $q.defer(); cancelerMap[cancelerKey] = canceler; config.timeout = canceler.promise; args[1] = config; } return getFn.apply(null, args); }; $delegate.abort = function (request) { console.log("aborting"); var cancelerKey, canceler; cancelerKey = getCancelerKey(request.method, request.url); canceler = cancelerMap[cancelerKey]; if (canceler != null) { console.log("aborting", cancelerKey); if (request.timeout != null && typeof request.timeout !== "number") { canceler.resolve(); delete cancelerMap[cancelerKey]; } } }; return $delegate; }]); }]); 

    这个代码是做什么的?

    要取消请求,必须设置“承诺”超时。 如果HTTP请求没有设置超时,那么代码会添加一个“承诺”超时。 (如果超时已经设置,则没有任何改变)。

    但是,要解决承诺,我们需要处理“延期”。 因此,我们使用地图,以便稍后可以检索“延迟”。 当我们调用abort方法时,从地图中检索“deferred”,然后调用resolve方法取消http请求。

    希望这有助于某人。

    限制

    目前这只适用于$ http.get,但您可以添加$ http.post的代码等等

    如何使用 …

    然后,您可以使用它,例如,状态更改,如下所示…

     rootScope.$on('$stateChangeStart', function (event, toState, toParams) { angular.forEach($http.pendingRequests, function (request) { $http.abort(request); }); });