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:
import axios from "axios";
// Configure outbound request interceptor logic
axios.interceptors.request.use(request => {
return request;
}, error => Promise.reject(error));
// Configure incoming response interceptor logic
axios.interceptors.response.use(response => {
return response;
}, error => Promise.reject(error));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.