使用 node-fetch 计算下载百分比的正确方法答案

【问题标题】：Correct way to calculate download percentage with node-fetch使用 node-fetch 计算下载百分比的正确方法
【发布时间】：2020-10-05 05:18:54
【问题描述】：

我有以下方法installFile，它将文件从 S3 下载到磁盘。该代码完美运行。我删除了一堆不相关的代码，只包含了我正在努力解决的部分。

我正在尝试做的是 console.log 下载该文件的下载百分比。

这里是代码的选择，特别是在我使用res.body.read() 访问接收到的字节时。

... other imports etc   
import fetch from 'node-fetch'


export const installFile = async (file: FileReference): Promise<FileInstalledEvent> => {
  const s3Link = await getDownloadLink(file.id as number)
  const res = await fetch(s3Link)

  const contentLengthHeader = res.headers.get('Content-Length')
  const resourceSize = parseInt(contentLengthHeader, 10)

  return new Promise((resolve, reject) => {

    /* Keep track of download progress */
    res.body.on('readable', () => {
      let chunk
      let recievedLength: number = 0
      let downloadProgressAsPercentage: number = 0
      
      while (null !== (chunk = res.body.read())) {
        console.log(`Received ${chunk.length} bytes of data.`)
        recievedLength += chunk.length
        console.log("recieved", recievedLength, "of", resourceSize, "bytes")

        downloadProgressAsPercentage = recievedLength / resourceSize * 100
        console.log("Download percentage:", downloadProgressAsPercentage, "%")

      }
    })
... after this I go on to handle the file etc etc (which works fine)

文件下载正常，但控制台日志看起来是这样的。这些数字让我很困惑:)

Received 16360 bytes of data.
recieved 16360 of 4874349 bytes
Download percentage: 0.3356345637130209 %
Received 16360 bytes of data.
recieved 16360 of 4874349 bytes
Download percentage: 0.3356345637130209 %
Received 9050 bytes of data.
recieved 9050 of 4874349 bytes
Download percentage: 0.18566581916887773 %
download finished

为什么我最后没有达到 100%？

【问题讨论】：

为什么都是Number(...)？ chunk.length 已经是一个数字。同样在英文注释上（因为拼写很奇怪），它是“received”，而不是“received”，除非您需要共享您的代码，否则这并不重要，在这种情况下，拼写更正您的 varnames 变得更加重要。
良好的电话号码，已修复此问题。并感谢“收到”的收获！
我现在看到我正在以块的形式获取数据，但没有记录收到的总字节数，只是根据该块计算百分比。我想我需要跟踪总数并据此计算百分比，我会尝试。
将 let receivedLength=0 移到 res.body.on('readable'... 之外）并将块长度添加到 receivedLength 并记录应该很好。
工作，谢谢！

标签： reactjs typescript electron node-fetch

【解决方案1】：

你可以使用 Math.floor() 方法。

Math.floor((loaded / total) * 100)

【讨论】：