So legen Sie ein globales http-Timeout in AngularJs fest

Ich weiß, dass ich jedes Mal eine Zeitüberschreitung festlegen kann:

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

... aber ich möchte ein globales Timeout festlegen, um meinen Code trocken zu halten.

AKTUALISIERT : $ http berücksichtigt nicht die Standardeinstellung für das in httpProvider festgelegte Zeitlimit (siehe Kommentare). Mögliche Problemumgehung: https://gist.github.com/adnan-i/5014277

Ursprüngliche Antwort:

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

Dies ist mit blutenden Angular.js möglich (getestet mit Git Master 4ae46814ff).

Sie können den Request http Interceptor verwenden. So was.

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

Und dann in .config $ httpProvider injizieren und dies tun:

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

Danke für den Beitrag und das Update !!

Bei der Untersuchung dieses Problems speziell für $resourcedachte ich, ich würde näher auf das eingehen, was ich gefunden habe:

• Dieses Problem wurde im Tracker protokolliert und in Winkel 1.1.5 wird die Weitergabe der Timeout-Eigenschaft an die $httpAnforderung unterstützt:

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

• Für diejenigen von uns in früheren Versionen, insbesondere ich verwende Angular 1.0.6, ist es möglich, die Quelldatei für angle-resource.js in Zeile 396 zu bearbeiten. Dort finden Sie den Aufruf, $httpwo Sie die Timeout-Eigenschaft für alle selbst hinzufügen können Ressourcenanforderungen.

• Da es nicht erwähnt wurde und ich die Lösung von Stewie testen musste, wird bei einem Timeout das Argument 'status' überprüft, um zwischen einem Fehler und einem Abbruch / Timeout zu unterscheiden. Es wird 0für Zeitüberschreitungen zurückkehren, anstatt zu sagen 404:

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

• Da es nur wenige Fälle gibt, in denen ich ein Zeitlimit verwenden muss, anstatt es global festzulegen, verpacke ich die Anforderungen in eine $timeoutFunktion wie folgt:

  //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
  } 
  

Ich habe die gleiche Anforderung und verwende AngularJS 1.0.7. Ich habe mir den folgenden Code ausgedacht, da keine der oben genannten Lösungen für mich machbar erscheint (machbar in dem Sinne, dass das Timeout an einem Ort global sein soll). Grundsätzlich ich bin Maskierung der ursprünglichen http $ Methoden und Hinzufügen timeoutfür jede $httpAnforderung und andere zwingende Verknüpfung Methoden, wie get, post... so dass sie die neuen maskiert verwenden werden $http.

JSFiddle für folgenden Code:

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

    }]);

})();

Fügen Sie die Abhängigkeit vom obigen Modul hinzu und konfigurieren Sie das Zeitlimit durch Konfigurieren ngx$httpTimeoutProviderwie folgt:

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)

} ]);