I am trying to implement the Axios interceptors to display a loader component while Axios is making a request. The issue I am facing is related to accessing the isLoading property within the Axios function. In my root component, I have set up these interceptors in the created() function. Within this component, I have defined a property called isLoading which is initialized as false. However, when a request is triggered, I want to update it to true. But unfortunately, when I attempt to access this property, an error is thrown:
TypeError: Cannot read property
isLoadingof undefined
I'm puzzled by why I cannot access the isLoading property from inside the Axios function. Here is a snippet of my component setup:
<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>