Preface
In the Angular framework, the creation team encapsulates Ajax requests for users and exposes relevant interfaces through the $http service. Angular pointed out in its official documentation that the underlying $http service has made corresponding countermeasures against common security attacks on the Web, that is, Ajax encapsulated using the $http service provides users with a more secure guarantee. As a framework, it is necessary to ensure the availability of the framework and adaptability. Angular also reflects this good style in design and implementation. When we use Ajax, we sometimes hope that we can do some corresponding processing work before or after receiving the request, such as: before the request is initiated, add a message segment to the request header. When the request returns, it will manage the processing status of a request, such as unified processing of 404 status, etc. Angular's $http service fully takes into account the above situations when designing and implementing it. Next, let's learn and understand how to add an interceptor to the $http service and how to implement a similar interceptor mechanism in the service we implement ourselves.
What are interceptors – What are Interceptors?
Interceptor is a relatively common mechanism in server-side frameworks. For example, in Java frameworks such as spring, Struts2, interceptors are basic configuration items. Interceptors provide a mechanism that enables developers to define code that is executed before and after an action is executed. These codes can be code that prevents execution of an action before or after an action is executed, or code that modifies certain behaviors of target actions. (In AOP (Aspect-Oriented Programming), interceptors are used to intercept a certain method or field before or after, and then add certain operations before or after. It is more common in Spring frameworks)
Interceptor in $http service
Looking at the API or source code, we can find that in the implementation of Angular, an array called interceptors is provided through httpProvider. This array is registered by interceptor service, and the registration of the process will eventually form an interceptor chain. In this way, every time when the http service is called, angular will modify the corresponding Ajax action through the intercept point (section) we defined. I won't talk much about the theory, let's start to enter the actual combat:
How to declare an interceptor in Angular
// Interceptor declaration
('httpInterceptor', ['$log', function($log) {
$('$log is here to show you that this is a regular factory with injection');
return {
// do something
};
}]);
How to register declared interceptor into $http service
// Add the interceptor to $
(['$httpProvider', function($httpProvider) {
$('httpInterceptor');
}]);
Through the above two simple steps, we basically completed the writing and adding of the interceptor of the http service. However, the above code snippet cannot be used in practice. In order to truly implement the interception operation, we also need to follow the points exposed by the http service that can be intercepted for relevant code writing.
Does $httpProvider expose those points that can be intercepted?
- request: The request method can implement intercepting requests: This method will be executed before http sends the request to the server, so we can modify the configuration or do other operations in the line of sight of the method. 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 the http call failing.
- response: The response method can implement intercepting response: This method will be executed after http receives a response from the server, so we can modify the response message or do other operations. This method receives a response object as a parameter, and then must return a response object or promise. The response object includes request configuration, headers, status and data from the background. If an invalid response object is returned or a promise will be rejected, resulting in the http call failing.
- requestError: The requestError method can implement the intercepting request exception: Sometimes a request fails to send or is rejected by the interceptor. The request exception interceptor captures requests that were interrupted by the previous request interceptor. It can be used to restore requests or sometimes to undo configurations made before requests, such as closing the progress bar, activating buttons, and input boxes.
- responseError: The responseError method can implement intercepting response exceptions: Sometimes our background call fails. It is also possible that it was rejected by a request interceptor, or it was interrupted by the previous response interceptor. In this case, the response exception interceptor can help us recover background calls.
The use of the interface exposed above is also extremely simple. We can declare a $http service interceptor just like declaring a simple service, and hand it over to the angular injection mechanism to use the interceptor we configured.
// Declare an interceptor just like declaring an Angular service('sessionInjector', ['authService', function (authService){
return {
request: function (config){
if (!) {
['x-session-token'] = ;
}
return config;
}
};
}]);
// Then add the interceptor we declared to the interceptor chain of $httpProvider, and the service injection into Angular will be responsible for helping us improve it(['$httpProvider', function ($httpProvider){
$('sessionInjector');
}]);
Asynchronous support for $http service interceptor
In some scenarios, we hope to perform some asynchronous operations in the interceptor. Then perform different interception operations according to different processing results. AngularJS also supports this feature very well when designing. AngularJS allows us to return a promise object in the intercept method. For example, in the http service, if we return a promise object, the http service will delay in initiating a network request or delay responding to the request result.
('myInterceptor', ['$q', 'someAsyncService', function($q, someAsyncService) {
var requestInterceptor = {
request: function(config) {
var deferred = $();
().then(function() {
// Asynchronous operation succeeded, modify config accordingly
...
(config);
}, function() {
// Asynchronous operation failed, modify config accordingly
...
(config);
});
return ;
},
response: function(response) {
var deferred = $();
().then(function() {
// Asynchronous operation succeeded, modify response accordingly
...
(response);
}, function() {
// Asynchronous operation failed, modify response accordingly
...
(response);
});
return ;
}
};
return requestInterceptor;
}]);
In the above example, when the request is initiated, if the corresponding deferred is denied, the http request will fail (if packet capture analysis is performed, you will find that the http request has not been initiated). When the request is responded, if the deferred is rejected, the request will also fail. (The packet capture analysis, the network request has returned).
Summarize
The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate.