Question

我想在Axios收到我的请求时显示进度条。 axios软件包同时具有onDownloadProgress和onUploadProgress，以在下载或上传过程中显示进度条，但在获取请求过程中没有进度条。我搜索了很多问题和文章，但它们始终都是关于下载/上传进度或关于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

以下是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 2

我认为axios同时公开onUploadProgress和onDownloadProgress的原因是您可以轻松地对要传输的字节执行一些计算。如果是简单的服务器请求，我想使用诸如

上的设置之类的标志

state = {
  loading: false
}

，并在您提出要求时将其翻转至true。如果愿意，可以使用微调器作为蒙版。

Answer 3

我知道您要一个进度条，但是我已经使用本教程通过带有stroke-dasharray和stroke-dashoffset属性的svg圆创建一个进度圈。

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

整个过程都是在React中完成的，因此对您来说应该是一个非常容易的实现。

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

反应：如何在获取请求（不下载或上传）期间显示Axios的进度

4 个答案: