Intro To Angular HTTP Interceptors, And How To Create A Backendless App With Them.
Starting from Angular 4.3, We can finally use HTTP Interceptors.
So why are HTTP interceptors useful? You can use interceptors to cache your content, catch and handle errors, attach authentication headers to requests and more!
What Is Angular HTTP Interceptors?
Intercepts HttpRequest and handles them.
With Interceptors, you can declare interceptors that inspect and transform HTTP requests from your application to the server. On the other hand, you can also inspect and transform the server’s responses on their way back to the application.
You can think of it as a chain, the HTTP request starts from one end of the chain until it reaches the HTTP Backend handler which will dispatch the request via browser HTTP APIs to a backend. Then, the HTTP response start to roll from the other end. Each piece represents an interceptor that can perform an operation, once this operation is done a call can be made to the next linked piece.
Interceptors sit between the HttpClient interface and the HttpBackend.
Writing An Interceptor:
An interceptor is basically an Angular service implementing the HttpInterceptor interface.
This interface has only one method — intercept. This method has two parameters. The HttpRequest object, and a reference to the next handler in the chain.
It requires you to return an Observable of HttpEvents, which represents all possible events on the response stream.
This interceptor will only log to the console the HTTP request object. Afterwards, it will make a call to the next interceptor in the chain. In our case, since we only have one interceptor ,it will call the HttpBackend handler — that will dispatch the request via the browser HTTP API to the backend.
You can make a choice whether to call the next interceptor in the chain by calling the next.handle method, or short-circuit the chain and return your own observable.
Register your Interceptor
We have created our first interceptor,but we still can’t use it.
We have to inform Angular of its existence. Therefore we will register it with the HTTP_INTERCEPTORS token. This is a multi-provider token which represents the array of interceptors that are registered.
{ provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true } Watch out! The order you register your interceptors is important!
Create Backendless Angular App
Motivation
Mock backend can be used to develop and demo your Angular app without a need to create a backend server API. Usually, when you start with Angular, you want to connect to a backend. But often the backend is developed while you’re working on the frontend.
It’s also useful if you need to share your code in online web client development playgrounds such as Plunker.
We already know by now, how to create a simple interceptor. The next step is to create an interceptor that will handle our HTTP requests without a need for a backend.
MimicBackendInterceptor Class
This interceptor will check the HTTP Request URL, if it matches it will return back a new Observable with the fake HttpResponse and it will short-circuit the chain. Otherwise, if no match was found it will pass the request to the real backend server.
