Can we use onDownloadProgress from axios for loading API?

Question

I need to create a progress bar for loading API in a react project using axios, and I discovered the "onDownloadProgress" function for this. But I don't know if we can use it for get informations like loading percentage for exemple or if it only for files download?

So I don't sure if we can get informations about API loading with this function?

I tryed to implement this function in my code :

componentWillMount() {
  axios.get('https://guillaumeduclos.fr/jd-portfolio/wp-json/wp/v2/posts')
  .then(response => {
    axios.onDownloadProgress = (progressEvent) => {
      let percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
      console.log(percentCompleted);
    }
    this.setState({
      datas: response.data[0].acf.project_illustration.url,
      loading: false
    });
  })
  .catch(error => {
    if(error.response) {
      console.log(error.responderEnd);
    }
  });

}

The console.log() is not display. Thank you for your help.

Solution

You need to pass the onDownloadProgress in as an option. It will print out "Infinity" because of the lengthComputable.

Here is a post regarding that issue: JQuery ajax progress via xhr

componentWillMount() {
axios.get('https://guillaumeduclos.fr/jd-portfolio/wp-json/wp/v2/posts', {
  onDownloadProgress: (progressEvent) => {
    let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(progressEvent.lengthComputable)
    console.log(percentCompleted);
  }
})
  .then((response) => {
    this.setState({
      datas: response.data[0].acf.project_illustration.url,
      loading: false
    })
  }).catch(error => {
    if (error.response) {
      console.log(error.responderEnd);
    }
  });

}

Comments

[Guillaume]

Ok, I see the issue from your link, thanks. So "infinity" is print because the function cannot get the total value of my API ?