CODEWITHSUNDEEP
javascriptvue.jsaxios
AE1995
AE1995

Reputation: 372

Axios normal GET request progress

What I am trying to do:

I am using Vue And Axios, I am trying to show the progress in percentage in the console.

Problem is:

The request itself take 4 seconds or maybe more because it get lots of data and store it to an excel then Download it.

What I have tried:

I have found two methods in Axios: onDownloadProgress and onUploadProgress.

The onDownloadProgress function works fine but only when the download start not while the back-end is fetching the data to an excel file (Which take the most of the time).

Here is the front-end code:

axios.get(`${env.ENDPOINT}reports/products/credits_export`, {
    params: {
      category_id: form_data.category_id
    },
    responseType: 'blob',
    onDownloadProgress: (progressEvent) => {
      let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      console.log(progressEvent.lengthComputable);
      console.log(percentCompleted);
    }
  }).then((res) => {
    const url = window.URL.createObjectURL(new Blob([res.data]));
    const link = document.createElement('a');
    const file_name = `${new Date().toISOString().slice(0,10)}.xlsx`;
    link.href = url;
    link.setAttribute('download', file_name);
    document.body.appendChild(link);
    link.click();
    resolve(res.data);
  }).catch((e) => {
    reject(e);
  });

SUMMER:

My progress will be divided into two:

Upvotes: 1

Views: 2988

Answers (1)

Mr.Throg
Mr.Throg

Reputation: 1005

We don't know how much time will server take to respond you can't show the percentage of progress bar at that point of time, If it is a stream kind of data we can show progress, For this as you can simulate such kind of effect before making a call set state of you progress bar to show and then put some random percentage in a set Interval method then after getting the response recalculate and continue the progress status from that point. 

this.progress =true;
let interval = setInterval(()=>{
this.progressPercentage = randomFunction()
 // some random calculation for progress
},500)
axios.get(url)
.then(()=>{
   clearInterval(interval);
   // User your progress event object 
})

Upvotes: 1

Related Questions