Last active
October 11, 2020 05:36
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}); | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
); | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { AxiosInstance } from "axios"; | |
export const applyResponseNormalizer = (instance: AxiosInstance) => { | |
return instance.interceptors.response.use(response => response); | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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