Angularjs injiziert einen Interceptor, um den Ladeeffekt_AngularJS zu implementieren

Angularjs ist ein vollständiges Ajax-Framework. Wenn auf der Seite keine Vorgänge ausgeführt werden, erfolgt im Gegensatz zu normalen HTTP-Anfragen keine Antwort von der Seite .

Was ist ein Abfangjäger?

In $httpProvider gibt es ein Interceptor-Array, und der sogenannte Interceptor ist nur eine reguläre Service-Fabrik, die im Array registriert ist. Das folgende Beispiel zeigt Ihnen, wie Sie einen Interceptor erstellen:

<!-- lang: js -->
module.factory('myInterceptor', ['$log', function($log) {
 $log.debug('$log is here to show you that this is a regular factory with injection');
 var myInterceptor = {
  ....
  ....
  ....
 };
 return myInterceptor;
}]);

Fügen Sie es dann mit seinem Namen zum Array $httpProvider.interceptors hinzu:

<!-- lang: js -->
module.config(['$httpProvider', function($httpProvider) {
 $httpProvider.interceptors.push('myInterceptor');
}]);

Lassen Sie mich Ihnen zuerst die Renderings zeigen:

Dieser Artikel implementiert das Laden durch Einfügen von Interceptoren in httpProvider.

HTML-Code

<div class="loading-modal modal" ng-if="loading">
 <div class="loading">
  <img src="<&#63;=$this->module->getAssetsUrl()&#63;>/img/loading.gif" alt=""/><span ng-bind="loading_text"></span>
 </div>
</div>

CSS-Code

.modal {
 position: fixed;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 z-index: 99;
 background: rgba(0, 0, 0, 0.3);
 overflow: hidden;
}
.loading {
 position: absolute;
 top: 50%;
 background: white;
 #solution> .border-radius(8px);
 width: 160px;
 height: 72px;
 left: 50%;
 margin-top: -36px;
 margin-left: -80px;
 text-align: center;
 img {
 margin-top: 12px;
 text-align: center;
 }
 span {
 display: block;
 }
}

JS-Code

app.config(["$routeProvider", "$httpProvider", function ($routeProvider, $httpProvider) {
 $routeProvider.when('/', {
  templateUrl: "/views/reminder/index.html",
  controller: "IndexController"
 });
 $routeProvider.when('/create', {
  templateUrl: "/views/reminder/item/create.html",
  controller: "ItemCreateController"
 });
 $routeProvider.otherwise({redirectTo: '/'});
 $httpProvider.interceptors.push('timestampMarker');
}]);
//loading
app.factory('timestampMarker', ["$rootScope", function ($rootScope) {
 var timestampMarker = {
  request: function (config) {
   $rootScope.loading = true;
   config.requestTimestamp = new Date().getTime();
   return config;
  },
  response: function (response) {
   // $rootScope.loading = false;
   response.config.responseTimestamp = new Date().getTime();
   return response;
  }
 };
 return timestampMarker;
}]);

Interceptor ermöglicht Ihnen:

Abfangen von Anforderungen durch Implementierung der Anforderungsmethode: Diese Methode wird ausgeführt, bevor $http die Anforderung an den Hintergrund sendet, sodass Sie die Konfiguration ändern oder andere Vorgänge ausführen können. Diese Methode empfängt ein Anforderungskonfigurationsobjekt als Parameter und muss ein Konfigurationsobjekt oder ein Versprechen zurückgeben. Wenn ein ungültiges Konfigurationsobjekt oder Versprechen zurückgegeben wird, wird es abgelehnt, was dazu führt, dass der $http-Aufruf fehlschlägt.

Abfangen der Antwort durch Implementierung der Antwortmethode: Diese Methode wird ausgeführt, nachdem $http die Antwort aus dem Hintergrund empfangen hat, sodass Sie die Antwort ändern oder andere Vorgänge ausführen können. Diese Methode empfängt ein Antwortobjekt als Parameter und muss ein Antwortobjekt oder Versprechen zurückgeben. Das Antwortobjekt umfasst Anforderungskonfiguration, Header, Status und Daten aus dem Hintergrund. Wenn ein ungültiges Antwortobjekt zurückgegeben wird oder das Versprechen abgelehnt wird, schlägt der $http-Aufruf fehl.

Abfangen von Anforderungsausnahmen durch Implementierung der requestError-Methode: Manchmal kann eine Anforderung nicht gesendet werden oder wird vom Interceptor abgelehnt. Der Anforderungsausnahme-Interceptor erfasst Anforderungen, die vom vorherigen Anforderungs-Interceptor unterbrochen wurden. Es kann verwendet werden, um die Anfrage wiederherzustellen oder manchmal, um die vor der Anfrage vorgenommenen Konfigurationen rückgängig zu machen, z. B. das Schließen des Fortschrittsbalkens, das Aktivieren von Schaltflächen und Eingabefeldern usw.

Abfangen von Antwortausnahmen durch Implementierung der Methode „responsError“: Manchmal schlägt unser Hintergrundaufruf fehl. Es ist auch möglich, dass es von einem Anfrage-Interceptor abgelehnt oder von einem vorherigen Antwort-Interceptor unterbrochen wurde. In diesem Fall kann uns der Antwortausnahme-Interceptor dabei helfen, den Hintergrundaufruf fortzusetzen.