Skip to content

Instantly share code, notes, and snippets.

@createdbymahmood
Last active October 11, 2020 05:36
Show Gist options
  • Save createdbymahmood/ee8b56d46bd98798928f21df764981b6 to your computer and use it in GitHub Desktop.
Save createdbymahmood/ee8b56d46bd98798928f21df764981b6 to your computer and use it in GitHub Desktop.
This is my ApiService ( in fact, my axios instance ) that I'm using in my Projects, But it's not the perfect one, needs some more review
import axios from "axios";
// * interceptors
import { applyAuthInterceptor } from "./interceptors/AuthInterceptor";
import { applyAccessTokenRevalidator } from "./interceptors/TokenRevalidatorInterceptor";
import { applyErrorHandler } from "./interceptors/ErrorHandlerInterceptor";
import { applyResponseNormalizer } from "./interceptors/ResponseNormalizerInterceptor";
const apiService = axios.create({
baseURL: process.env.REACT_APP_BASE_URL,
});
// * applying interceptors
applyAuthInterceptor(apiService);
applyAccessTokenRevalidator(apiService);
applyErrorHandler(apiService);
applyResponseNormalizer(apiService);
export * from "axios";
export default apiService;
import { AxiosRequestConfig, AxiosInstance } from "axios";
interface AuthRequestConfig {
/**
* @default true
*/
shouldAuthenticate?: boolean;
}
declare module "axios" {
interface AxiosRequestConfig extends AuthRequestConfig {}
}
export const applyAuthInterceptor = (instance: AxiosInstance) => {
return instance.interceptors.request.use((config: AxiosRequestConfig) => {
const { shouldAuthenticate = true } = config;
if (shouldAuthenticate) {
// * some logic to read Bearer token from localStorage
config.headers.authorization = ``;
}
return config;
});
};
import { AxiosInstance, AxiosResponse, AxiosError } from "axios";
export const applyErrorHandler = (instance: AxiosInstance) => {
// Add a response interceptor
return instance.interceptors.response.use(
(res: AxiosResponse) => res,
(error: AxiosError) => {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log("Error", error.message);
}
return Promise.reject(error);
}
);
};
import { AxiosInstance } from "axios";
export const applyResponseNormalizer = (instance: AxiosInstance) => {
return instance.interceptors.response.use(response => response);
};
import { AxiosInstance, AxiosResponse, AxiosError } from "axios";
export const applyAccessTokenRevalidator = (instance: AxiosInstance) => {
return instance.interceptors.response.use(
(res: AxiosResponse) => res,
(error: AxiosError) => {
if (error.response) {
const UNAUTHORIZED_STATUS_CODE = 401;
if (error?.response?.status === UNAUTHORIZED_STATUS_CODE) {
// * make an api call to revalidate token
}
}
return Promise.reject(error);
}
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment