Question

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

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

...但是我想设置一个全局超时来保持我的代码DRY。

Answer 1

这可以使用出血的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');

Answer 2

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

原始答案：

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

Answer 3

感谢帖子和更新!!

在专门针对$resource研究此问题时，我想我会详细说明我发现的内容：

此问题记录在跟踪器中，在角度1.1.5中，支持将超时属性传递给$http请求：

https://github.com/angular/angular.js/issues/2190 http://code.angularjs.org/1.1.5/docs/api/ngResource.$resource

对于我们这些早期版本的人，特别是我使用的是角度1.0.6，可以在第396行编辑angular-resource.js的源文件，你会发现对{{1}的调用您可以在其中为所有资源请求自行添加超时属性。
由于没有提及我必须测试Stewie的解决方案，当发生超时时，判断错误和中止/超时之间的方法是检查'status'参数。如果超时，则会返回$http而不是0：
```
404
```
由于只有少数情况我需要使用超时而不是全局设置，我将请求包装在$http.get("/home", { timeout: 100 }) .error(function(data, status, headers, config){ console.log(status) }函数中，如下所示：
```
$timeout
```

Answer 4

我有相同的要求，我使用的是AngularJS 1.0.7。我已经提出了以下代码，因为上述解决方案对我来说似乎都不可行（在某种意义上我希望超时在一个地方是全局的）。基本上，我屏蔽原始的$ http方法并为每个timeout请求添加$http并覆盖其他快捷方法，例如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;
        }]);

    }]);

})();

添加对上述模块的依赖，并通过配置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)

} ]);

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

4 个答案: