给定 AngularJS 中的 Ajax 请求
$http.get("/backend/").success(callback);
如果启动另一个请求（例如相同的后端，不同的参数），取消该请求的最有效方法是什么。
问问题
124884 次
8 回答
329
此功能通过超时参数添加到 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.
于 2013-06-26T19:00:39.377 回答
11
使用 timeout 属性取消 Angular $http Ajax 在 Angular 1.3.15 中不起作用。对于那些迫不及待地想解决这个问题的人，我分享了一个封装在 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);
于 2015-04-01T19:21:30.640 回答
9
$http当前版本的 AngularJS 不支持取消发出的请求。有一个拉取请求打开以添加此功能，但此 PR 尚未审核，因此尚不清楚它是否会成为 AngularJS 核心。
于 2012-12-30T16:35:03.777 回答
6
如果你想用 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();
}
});
});
于 2015-07-01T07:33:06.323 回答
6
由于某种原因 config.timeout 对我不起作用。我使用了这种方法：
let cancelRequest = $q.defer();
let cancelPromise = cancelRequest.promise;
let httpPromise = $http.get(...);
$q.race({ cancelPromise, httpPromise })
.then(function (result) {
...
});并 cancelRequest.resolve() 取消。实际上它不会取消请求，但至少您不会得到不必要的响应。
希望这可以帮助。
于 2016-12-13T20:20:51.053 回答
3
这通过使用 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 方法时，会从 map 中获取“deferred”，然后我们调用 resolve 方法来取消 http 请求。
希望这可以帮助某人。
限制
目前这仅适用于 $http.get 但您可以为 $http.post 等添加代码
如何使用 ...
然后，您可以使用它，例如，在状态更改时，如下...
rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
angular.forEach($http.pendingRequests, function (request) {
$http.abort(request);
});
});
于 2015-10-05T12:19:47.970 回答
1
$http您可以使用“装饰器”将自定义功能添加到服务中，该装饰器会将abort()功能添加到您的承诺中。
这是一些工作代码：
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 的装饰器功能向服务添加with_abort()功能$http。
with_abort()使用$http允许您中止 http 请求的超时选项。
返回的 Promise 被修改为包含一个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()请求时，请求会被取消，并且不会运行任何 Promise 处理程序。
如果您希望调用错误处理程序，请将 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;
});
于 2018-05-18T16:14:46.113 回答
1
这是一个处理多个请求的版本，还检查回调中的取消状态以抑制错误块中的错误。（在打字稿中）
控制器级别：
requests = new Map<string, ng.IDeferred<{}>>();
在我的 http 中获取：
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 次，只有最后一个通过了。
于 2017-11-29T20:28:40.293 回答