fetchProgress

A middleware function for use with the browser Fetch API to provide download progress updates.

CDN

• jsdelivr
• unpkg

Usage

  const buffer = await fetch(url)
    .then(fetchProgress(event => console.log(`download is ${event.progress * 100} percent complete..`)))
    .then(res => res.arrayBuffer())

Examples

• download large file
• download large file in web worker

Notes

• fetchProgress is a function
  • it accepts 1 input parameter
    • an event handler function
    • lets call it progressHandler
• progressHandler is a function
  • it accepts 1 input parameter
    • an Object
    • lets call it event
      • it has 1 attribute
        • name: progress
        • value: number within the inclusive range 0 to 1
  • it returns a Promise that resolves to an instance of a class
    • having the following public methods:
      • arrayBuffer()
      • blob()
      • bytes()
      • json()
      • text()
    • having the following public properties:
      • headers
      • ok
      • redirected
      • status
      • statusText
      • type
      • url
    • these public methods and properties can be used as drop-in replacements for several of the methods and properties provided by the Response class, with the following caveats:
      • headers is a plain key/value Object, rather than an instance of the Headers class

Credits

• article: "Fetch: Download progress"
• article: "A horrifying 'globalThis' polyfill in universal JavaScript"

Legal

• copyright: Warren Bank
• license: GPL-2.0