Angular HttpInterceptor Usage Like Fake Backend.
Hi everyone,
I would like to show you how to use HttpInterceptor like fake backend in Angular project. If you are working as a front end developer, you always wait for backend developers to finish web services you need. In this case, we need to develop our application without web services. So the HttpInterceptor help us with getting the data request. We could use as mock data.
There are many things we can do with HttpInterceptor.
They are;
- Fake backend
- Authentication
- Caching
- URL transformation
- Modifying headers
- …
I will use as a FakeBackend.
I developed a simple application that can easily list, add and delete employees.
In this application, I changed the http requests according to my own wishes.
Employee Object;
Rest API endpoints.
/employes GET → get all employes.
/employes POST body: EmployeeObject create a new employee.
/employes/{public_employee_id} DELETE delete employee given public id.
After determining the endpoints, we can start the steps of our project.
Let’s Begin
Firstly, I created a simple employes.json external file as a list of default employes.
After that I created an employee-service and implement it with http-interceptor.
Fake Backend HttpInterceptor source code like below;
We will change our request’s and method’s values when request occured. After the http request is created, we will capture the request in HttpInterceptor . We will catch them in the HttpInterceptor .
I have written handleRequest method, it gives us two(2) parameters, first of one request, the another one is nexthttp handler.
List of all employes,
I cloned original request and changed it’s original url with employeeJsonPath variable.
Add a new employee to server code like below.
I cloned request body, because it has a new employee object in reqeuest body. After that object has no unique id as you see, I generate it and return as a HttpResponse.
In this area you can also use different things in http response. You can return different status, different body, header or etc.
Delete an employeee,
I have added reg-ex to catch employee id in /employes/{public-employe-id} url path and I want the method to be equal to the DELETE method.
I splitted the request url and get employe id and returned this id in the request body.
Full source code for fakebackend.ts.
After added fakebackend.ts HttpInterceptor, you need to add your fakeBackendProvider to your app.module.ts .
I have created employe.service.ts for interaction with fake backend.
It includes simple get, post an delete methods with Observable.
The employee.service.ts full source code like below.
Information About UI.
I have added a simple card to show an employe’s full name, unit and avatar. It’s very simple html code. I have used `*ngFor` for listing. And you will see delete icon on the right in card. You can easily delete a user with it.
Adding a new employee, I have created a simple form that has only fullname input and unit dropdown. You easily add a new user with it.
html source code like below.
app.component.ts source code.
Below code you will see the crud operations methods. I used RxJS in methods.
Application YouTube Video.
Conclusion
We can use HttpInterceptors for different purposes. It provides convenience during application development. So you can easily implement for your project for different purposes.
I hope you enjoy while reading.
Have a nice coding.
Source code available in github.
