In a single-page application (SPA), communication with the backend is one of the most common tasks. In Chapter 5, Angular Services and the Singleton Pattern, we learned that the Angular component that makes this communication is called Service. However, many side tasks are common to all communications with the backend, such as header processing, authentication, and loading.
We could do this sides task on a service-by-service basis, but in addition to being an unproductive activity, the team might not be able to implement some control on the request due to the carelessness or ignorance of a new member of the team.
In order to simplify the development of side tasks for communicating with the backend, the Angular framework implements the interceptor design pattern, which we will explore in this chapter. Here, we will cover the following topics:
- Attaching the token to the request with an interceptor
- Changing the request route
- Creating a loader
- Notifying success
- Measuring the performance of a request
By the end of this chapter, you will be able to create interceptors capable of implicitly performing tasks necessary for your backend communication.
Technical requirements
To follow the instructions in this chapter, you’ll need the following:
- Visual Studio Code (https://code.visualstudio.com/Download)
- Node.js 18 or higher (https://nodejs.org/en/download/)
The code files for this chapter are available at https://github.com/PacktPublishing/Angular-Design-Patterns-and-Best-Practices/tree/main/ch8.
While following this chapter, remember to run the backend of the application found in the gym-diary-backend folder with the npm start command.