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

Posted 2023-03-30

【中文标题】如何在获取请求期间显示 Axios 的进度（不是下载或上传）

【英文标题】：How to show progress of Axios during get request (not download or upload)

【发布时间】：2019-06-10 08:02:53

【问题描述】：

我想要在 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
            )  
        
    );

【参考方案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
)

【讨论】：

您也可以使用let percentCompleted = Math.floor(progressEvent.loaded / progressEvent.total * 100)，因此无需解析和查看标题。

【参考方案2】：

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

【参考方案3】：

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

state = 
  loading: false

只要您提出理想的请求，请将其转至true。如果您愿意，可以使用微调器作为遮罩。

【讨论】：

我知道怎么做的微调器，确实，它是从假到真的简单切换。但是，我至少有 7 个页面，其中包含大量数据的不同请求。我发现这个案例需要一个进度条而不是微调器，以便用户知道加载内容需要多长时间。

你有没有想过使用Suspense和React.lazy？我认为在这种情况下这样做是正确的（如果我没记错的话），在用户浏览页面时逐步加载页面，而不是一次加载所有页面。它还改善了用户体验。

我认为使用它肯定会很有趣！在这种情况下，我认为一个简单的微调器就可以了。然而;因为我还没有在文章和 *** 上找到这个特定问题的答案，所以我将暂时搁置这个问题，以便未来遇到相同问题的 React 开发人员可以在这里找到解决方案。感谢 Suspense / React.lazy 提示！ @tbuglc

不客气。您可能还会发现 Andrew Clark Concurrent Rendering in React[youtube.com/watch?v=ByBPyMBTzM0] 的演讲很有趣

【参考方案4】：

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

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

整个事情都是在 React 中完成的，所以它对你来说应该是一个非常简单的实现。