Facing some issues while creating axios interceptor in react native - react-native

Question

I am creating an app in react native and using laravel as backend. To manage error globally i am trying to create a axios request interceptor (never create before) which can handle errors but, i am getting error _api.default.get is not a function.
// My Axios Interceptor File
import axios from 'axios';
import {Config} from './common';
import {AsyncStorage} from '#react-native-community/async-storage';
const TIMEOUT = 1 * 60 * 1000;
axios.defaults.timeout = TIMEOUT;
axios.defaults.baseURL = Config.apiUrl;
const axiosInterceptors = async () => {
const token = await AsyncStorage.getItem('token');
const onRequest = config => {
if (token) {
config.headers.common.Authorization = `Bearer ${token}`;
}
return config;
};
const onSuccess = response => {
return response.data;
};
const onError = error => {
return Promise.reject(error);
};
axios.interceptors.request.use(onRequest);
axios.interceptors.response.use(onSuccess, onError);
};
export default axiosInterceptors;
and in my reducer
import axiosInterceptors from "../api"
export const fetchData = () => {
return dispatch => {
axiosInterceptors.get(apiUrl).then(something).catch(something)
}
}

Answer 1

It's work for me
const axiosInterceptors = axios.create({
baseURL: "your base url",
timeout: 500,
headers: {
Accept: "application/json",
Authorization: "Bearer "
}
});
API.interceptors.request.use(
async function(config) {
axios.defaults.timeout = 500;
const token = await AsyncStorage.getItem('token');
config.headers.Authorization = "Bearer ".concat(token);
return config;
},
function(error) {
return Promise.reject(error);
}
);
export default axiosInterceptors;