代码之家  ›  专栏  ›  技术社区  ›  Guillaume

我们可以使用AXIOS的OnDownloadProgress加载API吗?

  •  0
  • Guillaume  · 技术社区  · 6 年前

    我需要创建一个进度条,用于在使用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()。谢谢你的帮助。

    1 回复  |  直到 6 年前
        1
  •  1
  •   V Soren    6 年前

    你需要通过 onDownloadProgress 作为一种选择。 由于长度可计算,它将打印出“无穷大”。

    以下是关于该问题的帖子: 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);
        }
      });
    

    }