Reactjs 如何在get请求期间显示Axios的进度（非下载或上传）

我想在Axios接收我的请求时显示progressbar

axios

软件包既有

onDownloadProgress

又有

onUploadProgress

以在下载或上载期间显示进度条，但在get请求期间没有进度条。我搜索了很多问题和文章，但它们总是关于下载/上传进度或Vue.js的，我无法理解如何在React中执行此操作。

我下面有以下代码（因为我没有下载，所以无法运行）。

理想情况下，我会自己编写；但我愿意考虑使用，如果有人可以解释我将如何整合<代码> LoePosithsBar（）/<代码>我的AXIOS请求。

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

---

我认为

axios

同时公开

onUploadProgress

和

onDownloadProgress

的原因是您可以轻松地对传输的字节执行一些计算。对于简单的服务器请求，我认为应该使用一个标志，比如设置on

state = {
  loading: false
}

---

当您提出理想的请求时，请将其切换到

true

。如果愿意，您可以使用微调器作为遮罩。

我知道您要求提供进度条，但我使用本教程创建了一个进度圈，该进度圈使用带有

stroke dasharray

和

stroke dashoffset

属性的svg圆圈

---

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

以下是我在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
})

axios.get（“下载东西”{
onDownloadProgress：（progressEvent）=>{
let downloadCount=downloadCount（progressEvent.timeStamp、progressEvent.total、progressEvent.loaded）
完成百分比=数学轮（（progressEvent.loaded*100）/progressEvent.total）；
设置进度（完成百分比）
派遣({
键入：“正在下载”，
有效载荷：downloadCount.toFixed（1）
})
}
})。然后（（响应）=>{
}).catch（错误=>{
console.log（错误）；
});

spinner我知道怎么做，事实上，它很容易从false转换为true。但是，我至少有7页，其中包含大量数据的不同请求。我发现这个案例需要一个进度条，而不是一个微调器，这样用户就可以知道加载内容需要多长时间。你有没有想过使用

suspence

和

React.lazy

？我认为在这种情况下这样做是正确的（如果我没有错的话），当用户浏览页面时，逐步加载页面，而不是一次加载所有页面。它还改善了用户体验。我想它一定会很有趣！在这种情况下，我想一个简单的旋转器就可以了。然而；因为我还没有在文章或Stackoverflow中找到这个特定问题的答案，所以我将把这个问题留一段时间，以便将来遇到相同问题的React开发人员可以在这里找到解决方案。谢谢你的悬念/反应。懒惰提示！不客气。您也可以在React中找到Andrew Clark的这篇演讲

Concurrent Rendering

[有趣的是，您还可以使用

let percentCompleted=Math.floor（progressEvent.loaded/progressEvent.total*100）

，因此无需解析和查看标题。请阅读有关如何正确格式化代码的帮助页面。