using AbortController to abort a fetch

fetch-abort.mjs

const controller = new AbortController()
setTimeout(() => {
  if (res.body.locked) {  // body is locked means still reading 
    console.log("Two seconds passed. It's time to abort this slow fetch")
    controller.abort()
  } else {
    console.log("Wow, you have get all body. So fast!")
  }
}, 2000)

const res = await fetch("http://oss.wuuconix.link:2023/98764160_p0.png", { signal: controller.signal })
const reader = res.body.getReader()
let bytesRead = 0, bytesTotal = res.headers.get("content-length")

try {
  while (true) {
    const { value, done } = await reader.read()
    if (value) {
      bytesRead += value.length
      console.log(`${(bytesRead / 1000).toFixed(2)}KB / ${(bytesTotal / 1000).toFixed(2)}KB   ${(bytesRead / bytesTotal).toFixed(2)}%`)
    } else if (done) {
      reader.releaseLock()  // reader releastLock which make the body.locked turn from true to false
      break
    }
  }
} catch(e) {
  console.log(String(e))
}

fetch big images:

fetch small images: