Fast Learning Angularjs HTTP Response Interceptor _angularjs

Source: Internet
Author: User
Tags error handling

At any time, if we want to add global functionality to a request, such as identity authentication, error handling, etc., it is a good way to implement a request before it is sent to the server or when the server returns.

ANGULARJS provides a way to deal with the global dimension through interceptors.

Four types of interceptors

Implement the request method to intercept requests

Request:function (config) {
//do something ' request success return
Config | | | $q. When (config);

This method executes before the $http sends the request background, so you can modify the configuration or do something else. The method receives the request configuration object (requests configuration object) as an argument and must then return the configuration object or promise. If an invalid configuration object or promise is returned, it is rejected, causing the $http call to fail.

Implement Requesterror method to intercept request exceptions

Requesterror:function (rejection) {
//do something in Request error return $q. Reject (rejection);

Sometimes if a request fails or is rejected by the interceptor, the request exception interceptor captures the request that was interrupted by the last request interceptor. It can be used to recover requests or sometimes to undo the configuration that was made prior to the request, such as closing the progress bar, activating the button and the input box, and so on.

Implement response method to intercept the response

Response:function (response) {
//do something on response success

This method executes after the $http receives a response from the background, so you can modify the response or do something else. The method receives the Response object (response object) as an argument, and then must return the response object or promise. The response object includes the request configuration (requests configuration), header (headers), status, and data from the background. If an invalid response object is returned or the promise is rejected, the $http call fails.

Implement Responseerror method to intercept response exceptions

Responseerror:function (rejection) {
//do something in response error return $q. Reject (rejection);

Sometimes our backend call fails, or it is either rejected by a request interceptor or interrupted by a response interceptor. In this case, the response exception interceptor can help us recover the background call.

Interceptor Core

Intercept Service Factory

var app = Angular.module ("Ajaxhttp", []);
App.factory ("Httpinterceptor", ["$q", "$rootScope", Function ($q, $rootScope) {return
{
request:function ( Config) {
//do something in Request success return
Config | | | $q. When (config);
},
Requesterror:functio N (rejection) {
//do something on request error return
$q. Reject (Rejection)
},
Response:fu Nction (response) {
/do something on response success return
Response | | | $q. When (response);
},
Responseerror:function (rejection) {
//do something in response error return
$q. Reject (rejection);
}
};

Registering The Intercept factory method

App.config (["$httpProvider", function ($httpProvider) {
$httpProvider. Interceptors.push ("Httpinterceptor");

Example

Interception of the 401,404 process

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 for you to share the Quick Learning Angularjs HTTP Response Interceptor Knowledge, I hope you like, and thank you all the time to the cloud-Habitat community website support.

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.