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

x4shl7ld 于 12个月前发布在 iOS

关注(0)|答案(2)|浏览(135)

我需要使用axios在react项目中创建一个加载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()未显示。

axios

来源：https://stackoverflow.com/questions/52030158/can-we-use-ondownloadprogress-from-axios-for-loading-api

2条答案

按热度按时间

cwtwac6a1#

你需要把onDownloadProgress作为一个选项传入。由于长度为Computable，它将打印出“Infinity”。
这是一篇关于这个问题的文章：通过xhr jQuery Ajax化进程

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

字符串
}

赞(0）回复(0）举报 12个月前

ocebsuys2#

progressEvent.total在json中未定义

赞(0）回复(0）举报 12个月前