JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id='output'></div>
<div id='size'>stand by</div>

CSS

#output {
  width: 100vw;
  height: 150px;
  overflow-y: scroll;
}

#size {
  width: 100vw;
  height: 15px;
  overflow-y: scroll;
}

JavaScript

const prm = []
const sizeEl = document.querySelector('#size')
let size = 0;

function formatSizeUnits(bytes){
  if      (bytes >= 1073741824) { bytes = (bytes / 1073741824).toFixed(2) + " GB"; }
  else if (bytes >= 1048576)    { bytes = (bytes / 1048576).toFixed(2) + " MB"; }
  else if (bytes >= 1024)       { bytes = (bytes / 1024).toFixed(2) + " KB"; }
  else if (bytes > 1)           { bytes = bytes + " bytes"; }
  else if (bytes == 1)          { bytes = bytes + " byte"; }
  else                          { bytes = "0 bytes"; }
  return bytes;
}

async function main() {
  for (let i = 0; i < 800; i++) {
  	if (i % 2)
  	prm.push(axios.get('https://backend-dg-ice.ddns.net/v1/marketplace/not-grouped'))
    else
    prm.push(axios.get('https://backend-dg-ice.ddns.net/v1/marketplace'))
  }
  debugger
  size
  const resp = await Promise.allSettled(prm)
  console.log(resp)
  resp.forEach(r => {
    if (r.status === 'fulfilled') {
    size += +r.value.headers['content-length']
    sizeEl.innerText = formatSizeUnits(size)
    }
  })
}

main()