Loading bar when axios getting/posting request

Question

I am trying to make a loading bar on my project using Vue ProgressBar, and it works on my route, and that does not work when Axios is getting or posting the request.

This is my project code when i start the loading bar,

<script>
    import Swal from 'sweetalert2';
    import Editor from '@tinymce/tinymce-vue';
    export default {
        components: {
            'editor': Editor
        },
        title() {
            return 'Stock group data';
        },
        data() {
            return {
                stockgroup: {},
                user: {},
            }
        },
        created() {
            this.$Progress.start();
            this.loadDataWarehouse();
            this.loadUser();
            this.$Progress.finish();
        },
        methods: {
            async loadDataWarehouse() {
                const response = await axios.get('/api/stock-group/' + this.$route.params.id);
                this.stockgroup = response.data;
            },
            async loadUser() {
                const resp = await axios.get('/api/contact-list');
                this.user = resp.data;
            },
        },
    }

</script>

the this.$Progress.start() line is where the loading bar is executed.

But before I make it like this, I already read the documentation that we must add code on our default Vue app. I mean like App.vue

So i add this code to my App.vue

but when I running it and request to getting data, I don't know why it doesn't show the loading bar. You can see it here.

Is anyone can help me? Please...

Answer 1

if you want the progressbar showing on every request without needed to repeating the start and finish code. you can try to use axios interceptor

this.axios.interceptors.request.use((config) => {
    this.$Progress.start();
    return config;
});
this.axios.interceptors.response.use(
    (response) => {
        this.$Progress.finish();
        return Promise.resolve(response);
    },
    (error) => {
        this.$Progress.finish();
        return Promise.reject(error);
    },
);