I want to use the Axios
interceptors
to show my loader component while Axios
is performing a request. In my root component I put those interceptors
in the created()
function. In this component I also have a property called isLoading
which is set to false
. When a request is made I want to set it to true
. But when I try to access the property it says:
TypeError: Cannot read property
isLoading
of undefined
Why am I not able to access the isLoading
property from inside the Axios
function? This is my component:
<template>
<v-app>
<AppBar />
<router-view/>
<Loader v-if="isLoading"></Loader>
</v-app>
</template>
<script>
import AppBar from '../components/AppBar';
import Loader from '../components/Loader';
import axios from 'axios';
export default {
name: "App",
components: {
AppBar,
Loader
},
data() {
return {
isLoading: false
}
},
created() {
axios.interceptors.request.use(function (config) {
this.isLoading = true;
return config;
}, function (error) {
this.isLoading = false;
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
this.isLoading = false;
return response;
}, function (error) {
return Promise.reject(error);
});
}
};
</script>