This is what i came up with , but everytime i try to move around my screens in my app and do api calls its sends 3 console logs with the interceptors calls.
- The 1st Api call only sends 1 request but after it sends 3/4 calls of interceptors
- Im using Expo with react Native
let axiosInterceptor = null;
axiosInterceptor = axios.interceptors.request.use(function (config) {
if (!!axiosInterceptor || axiosInterceptor === 0 || axiosInterceptor >= 1) {
axios.interceptors.request.eject(axiosInterceptor);
}
if (config.url == "login/login") { //quando faz login não necessita dos headrs de autorização (Bearer Token)
return config;
}
setIsLoading(true);
//global.isWaitingRequestAnswers = true;
//console.log("request isWaitingRequestAnswers", global.isWaitingRequestAnswers);
const configToken = SecureStore.getItemAsync('token').then(token => {
console.log("Axios Call: " config.url)
// console.log("Axios Call Token: " token)
// console.log(token)
config.headers.Authorization = 'Bearer ' token;
return config;
});
return configToken;
}
, function (error) {
console.log('Error => axios.interceptors.request');
console.log(error);
});
**Updated **
**Updated 1 **
async function getInventario () {
var dados = null;
await axios.get('inventario/index')
.then((response) => {
dados = response.data;
})
.catch((error) => {
console.log(error)
});
return dados;
}
axios.interceptors.response.use(response => {
setIsLoading(false);
//global.isWaitingRequestAnswers = false;
//console.log("response isWaitingRequestAnswers", global.isWaitingRequestAnswers);
return response;
}, error => {
if (error.response.status === 401) {
authContext.signOut(); //logout -> go to Login Page
}
console.log('Error => axios.interceptors.request');
console.log(error);
});
i have this code in the end it could help!
CodePudding user response:
Looks like you're using this code in a React component preferably you have to place this code outside any React lifecycle.
CodePudding user response:
SecureStore.getItemAsync('token')
is asyncronous, you must wait response, change headers and then return config
but your code do it syncronous. As a result headers is not updated yet but you returned config already. Example with async/await
:
const CancelToken = axios.CancelToken;
let axiosInterceptor = false;
let requests = [];
const instance = axios.create();
instance.interceptors.request.use(async (config) => {
if (config.url === "login/login") {
return config;
}
requests.push(config);
if(!axiosInterceptor) {
axiosInterceptor = !axiosInterceptor;
setIsLoading(true);
const token = await SecureStore.getItemAsync('token');
axiosInterceptor = !axiosInterceptor;
requests.map(req => {
req.headers.Authorization = 'Bearer ' token;
return instance(req)
});
}
requests = [];
return {
...config,
cancelToken: new CancelToken((cancel) => cancel('Cancel repeated
request'))
};
}, function (error) {
console.log('Error => axios.interceptors.request');
console.log(error);
});