Можем ли мы использовать onDownloadProgress из axios для загрузки API?

Question

Мне нужно создать индикатор выполнения для загрузки API в реактивном проекте с использованием axios, и я обнаружил для этого функцию «onDownloadProgress».Но я не знаю, можем ли мы использовать его для получения информации, такой как процент загрузки для примера или только для загрузки файлов?

Так что я не уверен, можем ли мы получить информацию о загрузке API с помощью этой функции?

Я попытался реализовать эту функцию в своем коде:

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

}

console.log () не отображается.Спасибо за вашу помощь.

Answer 1

Вам необходимо передать onDownloadProgress в качестве опции.Он напечатает «Бесконечность» из-за lengthComputable.

Вот сообщение относительно этой проблемы: JQuery ajax progress через 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);
    }
  });

}