如何在AngularJS中取消$HTTP请求？

在AngularJS中给出一个Ajax请求

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

如果启动了另一个请求（例如相同的后端，不同的参数），取消该请求的最有效方法是什么？

127535 次浏览
小开

当前版本的AngularJS不支持取消使用$http发出的请求。有一个拉取请求已打开来添加此功能，但此PR尚未审查，因此尚不清楚是否会将其纳入AngularJS核心。

小开
最佳答案

此功能通过超时参数已添加到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.
小开
在Angular 1.3.15中，使用超时属性

取消Angular$HTTP AJAX不起作用。 对于那些迫不及待地想解决这个问题的人，我分享了一个包装在Angular中的jQuery Ajax解决方案。

该解决方案涉及两项服务：

  • 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);
小开

如果你想用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;

//在UIRouter配置中

$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();
}
});
});
小开

这通过使用如下的abort方法修饰$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方法时，将从映射中检索“延迟”，然后我们调用Resolve方法来取消HTTP请求。

希望这能帮助一些人。

局限性

目前，这只适用于$HTTP.get，但您可以为$HTTP.post等添加代码。

如何使用..

然后，您可以使用它，例如，在状态更改时，如下..

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

由于某种原因，config.timeout对我不起作用。我使用了这种方法：

let cancelRequest = $q.defer();
let cancelPromise = cancelRequest.promise;


let httpPromise = $http.get(...);


$q.race({ cancelPromise, httpPromise })
.then(function (result) {
...
});

并使用cancelRequest.resolve（）取消。实际上，它不会取消请求，但至少你不会得到不必要的响应。

希望这能有所帮助。

小开

这是一个处理多个请求的版本，还会在回调中检查取消状态，以抑制错误块中的错误。（打字稿）

控制器级别：

    requests = new Map<string, ng.IDeferred<{}>>();

在我的HTTP GET中：

    getSomething(): void {
let url = '/api/someaction';
this.cancel(url); // cancel if this url is in progress


var req = this.$q.defer();
this.requests.set(url, req);
let config: ng.IRequestShortcutConfig = {
params: { id: someId}
, timeout: req.promise   // <--- promise to trigger cancellation
};


this.$http.post(url, this.getPayload(), config).then(
promiseValue => this.updateEditor(promiseValue.data as IEditor),
reason => {
// if legitimate exception, show error in UI
if (!this.isCancelled(req)) {
this.showError(url, reason)
}
},
).finally(() => { });
}

帮助程序方法

    cancel(url: string) {
this.requests.forEach((req,key) => {
if (key == url)
req.resolve('cancelled');
});
this.requests.delete(url);
}


isCancelled(req: ng.IDeferred<{}>) {
var p = req.promise as any; // as any because typings are missing $$state
return p.$$state && p.$$state.value == 'cancelled';
}

现在看看“网络”选项卡，我发现它工作得很好。我打了4次电话，只有最后一次通过了。

enter image description here

小开

您可以使用将abort()功能添加到您的承诺的“装饰器”，将自定义功能添加到$http服务。

下面是一些工作代码：

app.config(function($provide) {
$provide.decorator('$http', function $logDecorator($delegate, $q) {
$delegate.with_abort = function(options) {
let abort_defer = $q.defer();
let new_options = angular.copy(options);
new_options.timeout = abort_defer.promise;
let do_throw_error = false;


let http_promise = $delegate(new_options).then(
response => response,
error => {
if(do_throw_error) return $q.reject(error);
return $q(() => null); // prevent promise chain propagation
});


let real_then = http_promise.then;
let then_function = function () {
return mod_promise(real_then.apply(this, arguments));
};


function mod_promise(promise) {
promise.then = then_function;
promise.abort = (do_throw_error_param = false) => {
do_throw_error = do_throw_error_param;
abort_defer.resolve();
};
return promise;
}


return mod_promise(http_promise);
}


return $delegate;
});
});

此代码使用AngularJS的decorator功能将with_abort()函数添加到$http服务。

with_abort()使用$http超时选项，该选项允许您中止HTTP请求。

返回的承诺被修改为包括abort()函数。它也有代码来确保abort()工作，即使您链接承诺。

下面是如何使用它的示例：

// your original code
$http({ method: 'GET', url: '/names' }).then(names => {
do_something(names));
});


// new code with ability to abort
var promise = $http.with_abort({ method: 'GET', url: '/names' }).then(
function(names) {
do_something(names));
});


promise.abort(); // if you want to abort

默认情况下，当您调用abort()时，请求将被取消，并且不会运行任何承诺处理程序。

如果希望调用错误处理程序，请将true传递给abort(true)。

在错误处理程序中，可以通过检查“xhrStatus ”属性来检查“错误”是否是由“中止”引起的。这里有一个例子：

var promise = $http.with_abort({ method: 'GET', url: '/names' }).then(
function(names) {
do_something(names));
},
function(error) {
if (er.xhrStatus === "abort") return;
});

提交答案