Angularjs injection interceptor achieves Loading effect _ AngularJS

Angularjs is a full ajax framework. For requests, if no operations are performed on the page, the page does not respond until the result is reversed. Unlike normal HTTP requests, angularjs, such as a progress bar, will be used as a full ajax framework. For requests that do not perform any operations on the page, the page does not respond until the results get bored, unlike normal HTTP requests, there may be progress bars and so on.

What is an interceptor?

$ HttpProvider has an interceptors array, and the so-called interceptor is just a simple standard service factory registered to this array. The following example shows how to create an interceptor:

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

Then add it to the $ httpProvider. interceptors array by its name:

 module.config(['$httpProvider', function($httpProvider) { $httpProvider.interceptors.push('myInterceptor');}]);

First, we will show you:

This article uses the httpProvider injection Interceptor to implement loading.

Html code

 
  module->getAssetsUrl()?>/img/loading.gif" alt=""/> 

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');}]);//loadingapp.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;}]);

The interceptor allows you:

Implement the request Method to intercept requests: This method will be executed before $ http sends the request to the background, so you can modify the configuration or perform other operations. This method receives the request configuration object as a parameter, and then must return the configuration object or promise. If an invalid configuration object or promise is returned, it will be rejected, resulting in $ http call failure.

Implement the response method to intercept the response: This method will be executed after $ http receives the response from the background, so you can modify the response or perform other operations. This method receives the response object as the parameter, and then must return the response object or promise. Response objects include request configuration, headers, status, and data from the background ). If an invalid response object or promise is returned, $ http fails to be called.

An exception occurred when intercepting a request by implementing the requestError method: Sometimes a request fails to be sent or is rejected by the interceptor. The request exception interceptor captures the requests interrupted by the previous request interceptor. It can be used to restore a request or sometimes to cancel the configuration made before the request, such as closing the progress bar, activating the button, and entering the box.

Response exceptions are intercepted by implementing the responseError method: Sometimes our background call fails. It may also be rejected by a request interceptor or interrupted by the previous response interceptor. In this case, the response to the exception interceptor can help us recover background calls.