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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.