我知道我可以每次都设置超时:
$http.get('path/to/service', {timeout: 5000});
...但我想设置一个全局超时以保持我的代码干燥。
我知道我可以每次都设置超时:
$http.get('path/to/service', {timeout: 5000});
...但我想设置一个全局超时以保持我的代码干燥。
这可以通过最前沿的 angular.js(使用 git master 4ae46814ff 测试)来实现。
您可以使用请求 http 拦截器。像这样。
angular.module('yourapp')
.factory('timeoutHttpIntercept', function ($rootScope, $q) {
return {
'request': function(config) {
config.timeout = 10000;
return config;
}
};
});
然后在 .config 中注入 $httpProvider 并执行以下操作:
$httpProvider.interceptors.push('timeoutHttpIntercept');
更新: $http 将不尊重在 httpProvider 中设置的超时默认设置(请参阅评论)。可能的解决方法:https ://gist.github.com/adnan-i/5014277
原答案:
angular.module('MyApp', [])
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.timeout = 5000;
}]);
感谢您的帖子和更新!
在专门研究这个问题时$resource
,我想我会详细说明我的发现:
$http
请求:https://github.com/angular/angular.js/issues/2190 http://code.angularjs.org/1.1.5/docs/api/ngResource.$resource
对于我们这些使用早期版本的人,特别是我使用 angular 1.0.6,可以在第 396 行编辑 angular-resource.js 的源文件,您将找到$http
可以自己为所有人添加超时属性的调用资源请求。
由于没有提及并且我必须测试 Stewie 的解决方案,当确实发生超时时,区分错误和中止/超时的方法是检查“状态”参数。它将返回0
超时而不是说404
:
$http.get("/home", { timeout: 100 })
.error(function(data, status, headers, config){
console.log(status)
}
由于只有少数情况需要使用超时而不是全局设置,因此我将请求包装在一个$timeout
函数中,如下所示:
//errorHandler gets called wether it's a timeout or resource call fails
var t = $timeout(errorHandler, 5000);
myResource.$get( successHandler, errorHandler )
function successHandler(data){
$timeout.cancel(t);
//do something with data...
}
function errorHandler(data){
//custom error handle code
}
我有同样的要求,我正在使用 AngularJS 1.0.7。我想出了下面的代码,因为上述解决方案对我来说似乎都不可行(在我希望超时在一个地方是全局的意义上是可行的)。基本上,我屏蔽了原始的 $http 方法并timeout
为每个$http
请求添加并覆盖其他快捷方法,例如get
, post
, ... 以便他们使用新的 masked $http
。
以下代码的JSFiddle :
/**
* @name ngx$httpTimeoutModule
* @description Decorates AngularJS $http service to set timeout for each
* Ajax request.
*
* Implementation notes: replace this with correct approach, once migrated to Angular 1.1.5+
*
* @author Manikanta G
*/
;(function () {
'use strict';
var ngx$httpTimeoutModule = angular.module('ngx$httpTimeoutModule', []);
ngx$httpTimeoutModule.provider('ngx$httpTimeout', function () {
var self = this;
this.config = {
timeout: 1000 // default - 1 sec, in millis
};
this.$get = function () {
return {
config: self.config
};
};
});
/**
* AngularJS $http service decorator to add timeout
*/
ngx$httpTimeoutModule.config(['$provide', function($provide) {
// configure $http provider to convert 'PUT', 'DELETE' methods to 'POST' requests
$provide.decorator('$http', ['$delegate', 'ngx$httpTimeout', function($http, ngx$httpTimeout) {
// create function which overrides $http function
var _$http = $http;
$http = function (config) {
config.timeout = ngx$httpTimeout.config.timeout;
return _$http(config);
};
$http.pendingRequests = _$http.pendingRequests;
$http.defaults = _$http.defaults;
// code copied from angular.js $HttpProvider function
createShortMethods('get', 'delete', 'head', 'jsonp');
createShortMethodsWithData('post', 'put');
function createShortMethods(names) {
angular.forEach(arguments, function(name) {
$http[name] = function(url, config) {
return $http(angular.extend(config || {}, {
method : name,
url : url
}));
};
});
}
function createShortMethodsWithData(name) {
angular.forEach(arguments, function(name) {
$http[name] = function(url, data, config) {
return $http(angular.extend(config || {}, {
method : name,
url : url,
data : data
}));
};
});
}
return $http;
}]);
}]);
})();
对上述模块添加依赖,通过配置来配置超时时间ngx$httpTimeoutProvider
,如下:
angular.module('App', ['ngx$httpTimeoutModule']).config([ 'ngx$httpTimeoutProvider', function(ngx$httpTimeoutProvider) {
// config timeout for $http requests
ngx$httpTimeoutProvider.config.timeout = 300000; // 5min (5 min * 60 sec * 1000 millis)
} ]);