CODEWITHSUNDEEP
javascriptvue.jsprogress-bar
Bin Ski.
Bin Ski.

Reputation: 1005

Loading bar when axios getting/posting request

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 Appvue

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.

it should be existed loader bar

Is anyone can help me? Please...

Upvotes: 0

Views: 4113

Answers (2)

Christopher Reeve
Christopher Reeve

Reputation: 478

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);
    },
);

Upvotes: 2

Chin. Udara
Chin. Udara

Reputation: 744

You are looking past the async functions you are calling!

In-fact what you are doing is, showing the progress bar and hiding it soon after calling two async functions.

You have two options here.

  1. Make the hook async and await inside.

    created: async () => {
 this.$Progress.start();
 // wait for the async to finish
 await this.loadDataWarehouse();
 await this.loadUser();
 // then hide the progress bar
 this.$Progress.finish();
},

OR

  1. Push both inside a promises array and wait- this is not as elegant in terms of readability but could be better in terms of performance because it does not wait for the first promise to return to execute the second promise unlike in option 1.

    created: () => {
 // promises array
 let promises = [];
 // this context
 const self = this;
 this.$Progress.start();
 // push into the array
 promises.push(this.loadDataWarehouse());
 promises.push(this.loadUser());
 // then hide the progress bar
 Promise.all(promises).then(()=>{
   self.$Progress.finish();
 })
},

Upvotes: 1

Related Questions