如何在get请求期间显示axios的进度（不是下载或上传）

Question

我想要的是在 Axios 收到我的请求时显示一个进度条。 axios 软件包同时具有 onDownloadProgress 和 onUploadProgress 以在下载或上传期间显示进度条，但在获取请求期间没有进度条。我搜索了很多问题和文章，但它们总是关于 download/upload 进展或 Vue.js，我不明白如何在 React 中做到这一点。

我在下面有以下代码（因为我没有下载所以不能运行）。

理想情况下，我会自己写；但如果有人可以向我解释如何将 loadProgressBar() 与我的 Axios 请求集成，我愿意考虑使用 axios-progress package。

request = () => {
    this.setState({error: null, results: []})
    axios({
        method: 'get',
        url: process.env.REACT_APP_API_LOCALS,
        responseType: 'json',
        onDownloadProgress: (progressEvent) => {
            var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            this.setState({
                loading: percentCompleted
            })
        },
    })
    .then(
        (response) => {
            console.log(response)
            this.setState({
                results: response.data.results,
                error: null,
                totalPages: Math.ceil(response.data.count / response.data.results.length)
            })  
        }
    )
    .catch(
        (error) => {
            this.setState({
                loading: null,
                error: true
            })  
        }
    );
}

Answer 1

我认为 axios 公开 onUploadProgress 和 onDownloadProgress 的原因是您可以轻松地对传输的字节执行一些计算。在简单的服务器请求的情况下，我认为使用一个标志，例如在

上设置

state = {
  loading: false
}

并在您提出请求时将其翻转为 true 是最理想的。如果您愿意，可以使用旋转器作为蒙版。

Answer 2

我知道你想要一个进度条，但我已经使用本教程创建了一个进度圈，利用具有 stroke-dasharray 和 stroke-dashoffset 属性的 svg 圆圈。

https://css-tricks.com/building-progress-ring-quickly/

整个事情都是在 React 中完成的，因此对您来说应该是一个非常简单的实现。

Answer 3

以下是 React 中对我有用的东西：

const client = axios.create({
  baseURL: 'http://localhost:10000/v1/client',
  timeout: 20000
})

let result = await client.get('/fetchMeSomething', {
  onDownloadProgress: progressEvent => {
    const total = parseFloat(progressEvent.currentTarget.responseHeaders['Content-Length'])
    const current = progressEvent.currentTarget.response.length

    let percentCompleted = Math.floor(current / total * 100)
    console.log('completed: ', percentCompleted)
  }
})
.then(res => {
  console.log("All DONE: ", res.headers)
  return res.data
})

Answer 4

  axios
  .get("download something", {
    onDownloadProgress: (progressEvent) => {
      let downloadCount = DownloadCount(
        progressEvent.timeStamp,
        progressEvent.total,
        progressEvent.loaded
      );
      let percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      setProgressing(percentCompleted);
      dispatch({
        type: "downloading",
        payload: downloadCount.toFixed(1),
      });
    },
  })
  .then((response) => {})
  .catch((error) => {
    console.log(error);
  });

如何在get请求期间显示axios的进度（不是下载或上传）

How to show progress of Axios during get request (not download or upload)

reactjs

axios

loading

get-request