Seite 3: Netzwerklasten simulieren, Fazit

Inhaltsverzeichnis

Simulieren von Netzwerklasten

Durch das Verwenden der Platzhalter finden Netzwerkanfragen gar nicht statt, sodass die Anwendung das Ergebnis direkt retour liefert. Um für reale Bedingungen mit unterschiedlichen Wartezeiten zu sorgen, können Entwickler auf einen Angular.js-Decorator zurückgreifen.

Der zu verändernde Service httpBackend ist als Parameter $delegate an die anonyme Funktion des Decorators zu übergeben. Ein Blick in den Quellcode des Moduls ngMock zeigt, dass die Serialisierung des Diensts, also der Methodenname und dessen Parameter, als vierten Parameter einen callback erwartet, der für die Antwort zuständig ist. Um ihn zu verändern, ist für den gesamten Service eine Verpackung (Wrapper) zu erstellen, die als Stellvertreter des originalen Services dient. Er erhält die gleichen Parameter wie das Original und definiert darin eine Neuimplementierung des Parameters callback mit dem Namen delayedCallback. Er hat die Aufgabe, das Ausführen der originalen callback durch eine setTimeout-Funktion um eine Zufallszahl delay zu verzögern. Anschließend ruft der Wrapper den originalen $delegate-Dienst mit dem modifizierten delayedCallback und den restlichen Parametern auf.

Da der httpBackend-Service jedoch noch weitere Eigenschaften aufweist, muss der Wrapper sie ebenfalls enthalten. Das bedeutet, dass sämtliche Eigenschaften und Methoden des Ausgangsdiensts auf ihn zu kopieren sind. AngularJS stellt hierfür die Hilfsfunktion angular.extend zur Verfügung. Zum Schluss gibt der Decorator den verpackten Service aus.

// httpBackend um Delay erweitern
app.config(function ($provide) {
 $provide.decorator('$httpBackend',
 function($delegate) {
 // $delegate ==>
 // function $httpBackend(method, url, data,
 // callback,  headers, timeout, withCredentials)
 // Parameter callback soll verzögert ausgeführt werden

 // Proxy für $httpBackend erstellen
 var wrapper = function(method, url, data,
 callback,headers, timeout, withCredentials) {
 // Proxy für Parameter callback erstellen
 var delayedCallback = function() {
 // Zufällige Netzwerklast simulieren
 var delay = Math.random(0, 10) * 1000;

 // Verzögerter Aufruf

 setTimeout((function() {
  console.log('Antwortdauer: ' + delay);
  callback.apply(this, arguments[0]);
 }.bind(this,arguments)), delay);
};
$delegate(method, url, data, delayedCallback,
headers, timeout, withCredentials);
};

// Der äußere Proxy muss alle Eigenschaften 
// und Methoden des Originals aufweisen

angular.extend(wrapper,$delegate);
// mit Decorator ausgestatteten Service zurückgeben
return wrapper;
 });
});

Fazit

Mehr Infos

Tipps und Tricks für AngularJS

Teil 1: Internationalisierung
Teil 2: ES2015
Teil 3: OAuth 2.0
Teil 4: Animationen
Teil 5: Transformationen und Interceptors
Teil 6: Backend-lose Entwicklung mit ngMockE2E
Teil 7: GUIs mit @ngrx/store (I)
Teil 8: GUIs mit @ngrx/store (II)

Außerdem: AngularJS 1.x und 2.0 mit dem Component Router parallel betreiben

Durch die frühzeitige Definition von APIs erhalten Backend- und Frontendentwickler nicht nur eine dokumentierte Schnittstelle, sondern können durch den Einsatz von Platzhaltern unabhängig von einander entwickeln. AngularJS unterstützt Frontendentwickler dabei mit dem Modul ngMockE2E und ermöglicht es, Attrappen für etwaige Routen zu definieren, die sich später, wenn der produktive Endpunkt zur Verfügung steht, einzeln deaktivieren lassen. Zudem können Entwickler den $httpBackend-Dienst mit einem Decorator um eine zufällige Wartezeit erweitern, um reale Netzwerklasten zu simulieren.

Vildan Softic
ist als selbstständiger Berater und Softwareentwickler tätig. Der Fokus liegt dabei auf Single Page Applications mit diversen Frameworks sowie Desktop-Entwicklung mit .NET. (jul)