沃梦达 / 编程问答 / 前端问题 / 正文

我们可以使用axios中的onDownloadProgress来加载API吗？

沃梦达教程前端问题

2022-01-01

Can we use onDownloadProgress from axios for loading API?(我们可以使用axios中的onDownloadProgress来加载API吗？)

本文介绍了我们可以使用axios中的onDownloadProgress来加载API吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要创建一个进度条，用于使用AXIOS在Reaction项目中加载API，为此我发现了"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()。感谢您的帮助。

推荐答案

您需要将onDownloadProgress作为选项传入。由于长度可计算，它将打印出"Infinity"。

这里有一篇关于该问题的帖子：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);
    }
  });

}

这篇关于我们可以使用axios中的onDownloadProgress来加载API吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

加载