获取 API 下载进度指示器？答案

【问题标题】：Fetch API Download Progress Indicator?获取 API 下载进度指示器？
【发布时间】：2018-04-27 08:48:38
【问题描述】：

我正在尝试捕获 Fetch 请求的下载进度并使用它来更改进度条的宽度。我将 ProgressEvent.lengthComputable 视为一种潜在的解决方案，但不确定它是否可以与 Fetch API 一起使用。

【问题讨论】：

不正确。 fetch() 的承诺在收到第一个数据包后解析，但不会等到整个数据包都在那里。
stackoverflow.com/questions/36453950/…
那么stackoverflow.com/questions/35711724/…会更好，除了它更旧
由于赏金，不能标记为重复，但它就在那里。
让我们重新打开，因为这个问题是特定于下载的，而建议的重复答案是特定于上传的

【解决方案1】：

你可以用 axios 代替

import axios from 'axios'
export async function uploadFile(file, cb) {
  const url = `//127.0.0.1:4000/profile`
  try {
    let formData = new FormData()
    formData.append("avatar", file)
    const data = await axios.post(url, formData, {
      onUploadProgress: (progressEvent) => {
        console.log(progressEvent)
        if (progressEvent.lengthComputable) {
          let percentComplete = progressEvent.loaded / progressEvent.total;
          if (cb) {
            cb(percentComplete)
          }
        }
      }
    })
    return data
  } catch (error) {
    console.error(error)
  }
}

【讨论】：

专门要求 FETCH 而不是 xmlHTTP ！

【解决方案2】：

不检查错误（如 try/catch 等）

const elStatus = document.getElementById('status');
function status(text) {
  elStatus.innerHTML = text;
}

const elProgress = document.getElementById('progress');
function progress({loaded, total}) {
  elProgress.innerHTML = Math.round(loaded/total*100)+'%';
}

async function main() {
  status('downloading with fetch()...');
  const response = await fetch('https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg');
  const contentLength = response.headers.get('content-length');
  const total = parseInt(contentLength, 10);
  let loaded = 0;

  const res = new Response(new ReadableStream({
    async start(controller) {
      const reader = response.body.getReader();
      for (;;) {
        const {done, value} = await reader.read();
        if (done) break;
        loaded += value.byteLength;
        progress({loaded, total})
        controller.enqueue(value);
      }
      controller.close();
    },
  }));
  const blob = await res.blob();
  status('download completed')
  document.getElementById('img').src = URL.createObjectURL(blob);
}

main();

<div id="status">&nbsp;</div>
<h1 id="progress">&nbsp;</h1>
<img id="img" />

改编自here

【讨论】：