AngularJS uses Interceptors to process HTTP requests and responses in a unified manner, and angularjs instructions

AngularJS uses Interceptors to process HTTP requests and responses in a unified manner, and angularjs instructions

In Web development, apart from data operations, the most frequent is to initiate and process various HTTP requests. In addition, HTTP requests are asynchronous. If common errors are captured separately in each request, when dealing with various types of custom errors, there will be a lot of code with similar functions, or you can use ugly methods to call several custom functions in each request for processing. These two methods are basically not reliable. Fortunately, AngularJS provides Interceptors-to uniformly process all XHR requests in the application.

Main functions

Interceptors have two processing times:

1. After other program code executes the HTTP request, the request is processed before the request is actually sent from the browser.
2. After receiving the request response, the request response is processed before being sent to other program code.

Therefore, it is not hard to understand that it can be used in the following aspects:

1. Global processing error
2. Uniform authentication and One-Class Processing
3. Preprocessing all outgoing requests
4. Preprocessing all received responses
5. Perform operations to enhance user experience, such as displaying a progress bar

Basic usage

Let's take a look at the basic usage:

Var app = angular. module ('app', []); // defines a Service, which will be used as the processing function app of Interceptors. factory ('httpinterceptor ', [' $ Q', HttpInterceptor]); function HttpInterceptor ($ q) {return {request: function (config) {return config;}, requestError: function (err) {return $ q. reject (err) ;}, response: function (res) {return res ;}, responseError: function (err) {if (-1 = err. status) {// no response from the remote server} else if (500 = err. status) {// handle various types of custom errors} else if (501 === err. status ){//...} return $ q. reject (err) ;};}// Add the corresponding Interceptorsapp. config (['$ httpProvider', function ($ httpProvider) {$ httpProvider. interceptors. push (HttpInterceptor);}]);

Learn more

In the actual Interceptor processing function, return an object containing four members. These four members are not required. You can specify one or two based on the actual situation, as shown below:

1. Request: receives a parameter, which is a standard config object in $ http, and also needs to return a standard config. You can add authentication information and start the progress bar here.
2. RequestError: when multiple interceptors exist, requestError will throw an error in the previous Interceptor or execute $ q. reject (), and the received parameters will correspond to errors.
3. Response: accept a request object parameter and return directly without processing it. You can also display the progress bar as successful completion. Of course, if the backend API returns a custom error, if the HTTP status code is still 200, you can handle custom errors here. You can also process the returned data. Note that you must set the progress bar to complete.
4. ResponseError: this is a major issue, that is, it can handle standard Http errors, such as when the server does not respond, or CGI such as PHP often occurs in the 502 class, you can also handle custom errors with HTTP Status Codes not 200.

In the above four examples, the first two are Request pre-processing, and the last two are Request Response Processing.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.