Create a React App
The first thing we'll need to add HTTP interceptors to is an app...
Using the instruction on the Create-React-App site, create a React app with Typescript.
Add Axios to the App
For those unfamiliar with Axios, it is an npm package for making HTTP requests.
After the app has finished setting up, in a terminal add Axios to the app:
npm i axios
Configure the HTTP Interceptors
It is trivial to actually configure the interceptors in your React app.
In the index.tsx file of your React app add the following:
These two use() calls on the request and response objects in the Axios interceptors does the magic to modify the outgoing request and the incoming response data.
In the anonymous arrow function, it is possible to configure any custom logic required for your app.
Commonly, this will be adding auth token headers along with setting/retrieving other headers or local storage values.
If you liked this post, please share it!