React - 多个下载的单个进度条

Question

我想同时下载文件，但我想获得进度 下载在单个进度条中。

我已经有了下载资产的代码，只需要最好的方式来表示它。

Promise.all(arr.map((endpoint) => axiosInstance.get(endpoint.url,{
onDownloadProgress: (progressEvent) =>{
  let percentCompleted = Math.round(progressEvent.loaded * 100 / 
  progressEvent.total);
  console.log(progressEvent.lengthComputable);
  console.log("progress completed : " + percentCompleted);
},
responseType:"arraybuffer",
headers: {
  'Content-Type': 'application/json',
}
}))

编辑：

接受的回答对我有帮助，现在我有一个进度条，其中包含同时下载的百分比

Answer 1

经过一些挖掘，我发现了这个：

let progress = 0;
const arr = [...]; // <request_1>, <request_2>, ...<request_n>
const arrLen = arr.length;

Promise.all(
  arr.map((endpoint) => {
    let previous = 0;

    return axios.get(endpoint, {
      onDownloadProgress: (progressEvent) => {
        const current = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total / arrLen
        );

        progress += current - previous;
        console.log(progress);

        previous = current;
      },
      responseType: "arraybuffer",
      headers: {
        "Content-Type": "application/json",
      },
    });
  })
);

P.S：这是一个快速的解决方案。

资源

1. Progress bar for multiple ajax requests with stages of completion. Is it possible?