如何在AngularJs中设置全局http超时

我知道我可以每次都设置一个超时时间：

$http.get('path/to/service', {timeout: 5000}); 

…但我想设置一个全局超时，让我的代码干。

Answer 1

更新 ：$ http将不尊重超时的默认设置在httpProvider中设置它（请参阅注释）。 可能的解决方法： https ： //gist.github.com/adnan-i/5014277

原始答案：

 angular.module('MyApp', []) .config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.timeout = 5000; }]); 

Answer 2

这是可能的出血边angular.js（用git master 4ae46814fftesting）。

你可以使用请求http拦截器。 喜欢这个。

  angular.module('yourapp') .factory('timeoutHttpIntercept', function ($rootScope, $q) { return { 'request': function(config) { config.timeout = 10000; return config; } }; }); 

然后在.config中注入$ httpProvider并执行此操作：

 $httpProvider.interceptors.push('timeoutHttpIntercept'); 

Answer 3

感谢您的post和更新！

在专门为$resource研究这个问题时，我想我会详细说明我发现的：

• 这个问题被logging在跟踪器中，并且在angular度1.1.5中，支持将超时属性传递给$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的调用，你可以自己添加超时属性为所有资源请求。

• 由于没有提到，我不得不testingStewie的解决scheme，当发生超时，告诉之间的错误和中止/超时的方式是检查“状态”参数。 它会返回0超时，而不是说404 ：

   $http.get("/home", { timeout: 100 }) .error(function(data, status, headers, config){ console.log(status) } 

• 由于只有less数情况下需要使用超时而不是全局设置，所以我将这些请求封装在$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 } 

Answer 4

我有相同的要求，我使用AngularJS 1.0.7。 我已经提出了下面的代码，因为上面的解决scheme对于我来说似乎都不可行（从某种意义上说，我希望超时在全球范围内是可行的）。 基本上，我掩盖了原始的$ http方法，并为每个$http请求添加timeout ，并覆盖其他快捷方法，比如get ， post ，…以便他们将使用新的掩码$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; }]); }]); })(); 

添加对上述模块的依赖，并通过configurationngx$httpTimeoutProviderconfiguration超时，如下所示：

 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) } ]);