Quick learning of AngularJs HTTP Response interceptor and quick learning of angularjs

Quick learning of AngularJs HTTP Response interceptor and quick learning of angularjs

At any time, if we want to add global functions for the request, such as identity authentication and error handling, we can intercept the request before it is sent to the server or when the server returns it, is a good means of implementation.

AngularJs provides a global approach for processing through the interceptor.

Four interceptors

Implement the request Method to intercept requests

request: function(config) {// do something on request successreturn config || $q.when(config);} 

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.

An error occurred while implementing the requestError method to intercept requests.

requestError: function(rejection) {　　// do something on request error　　return $q.reject(rejection);} 

Sometimes a request fails to be sent or is rejected by the Interceptor. The request exception interceptor captures the requests that are 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.

Implement response Interception

response: function(response) {　　// do something on response successreturn response || $q.when(response);} 

This method will be executed after $ http receives a 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.

Implement the responseError method to intercept response exceptions

responseError: function(rejection) {// do something on response error　　return $q.reject(rejection);} 

Sometimes our background call fails, or it may 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.

Interceptor Core

Interception Service Factory

var app = angular.module("ajaxHttp", []);app.factory("httpInterceptor", [ "$q", "$rootScope", function($q, $rootScope) {return {request: function(config) {// do something on request successreturn config || $q.when(config);},　　 requestError: function(rejection) {　　　　 // do something on request error　　　　 return $q.reject(rejection)　　 },response: function(response) {// do something on response successreturn response || $q.when(response);},responseError : function(rejection) {// do something on response errorreturn $q.reject(rejection);}};}]); 

How to register an intercept Factory

app.config(["$httpProvider", function($httpProvider) {　　$httpProvider.interceptors.push("httpInterceptor");}]); 

Example

Block 401,404 of requests

app.config(["$httpProvider", function($httpProvider) { $httpProvider.interceptors.push('httpInterceptor'); }]); app.factory("httpInterceptor", ["$q", "$injector", function($q, $injector) {return {"responseError": function(response) {if (response.status == 401) {var rootScope = $injector.get('$rootScope');var state = $injector.get('$rootScope').$state.current.name;rootScope.stateBeforLogin = state;rootScope.$state.go("login");return $q.reject(response);}else if (response.status === 404) {console.log("404!");return $q.reject(response);}}};]);

The above content will be shared with you about how to quickly learn AngularJs HTTP Response Interceptor. I hope you will like it and thank you for your constant support for the website of.

Articles you may be interested in:

• Angularjs injection interceptor achieves Loading effect
• Analysis on AngularJs HTTP Response interceptor