前端使用 fetch() 流式下载.mp4视频文件，跟踪进度

2023-01-28 13:51 由隙游尘发表于 #前端开发

参考：https://www.cnblogs.com/lxlx1798/articles/16969244.html

要么使用流读取器，要么使用 Reponse 的方法来获取结果，不能同时使用两种方法来读取相同的响应。

直接获取：

Response.blob() 方法返回一个 resolve 返回值为 Blob 对象的 Promise

fetch(videoUrl).then(res => {
                const p = res.blob()
                return res.blob()
            }).then(blob => {
                const a = document.createElement("a");
                a.style.display = 'none'
                document.body.append(a)
                const url = window.URL.createObjectURL(blob)
                a.href = url
                a.download = item.name
                a.click()
                document.body.removeChild(a)
                window.URL.revokeObjectURL(url)
            })

流读取：

Response.body 是一个 ReadableStream 对象

ReadableStream.getReader() 创建流读取器，并且会把流锁定，默认返回的是 ReadableStreamDefaultReader 类型

The getReader() method of the ReadableStream interface creates a reader and locks the stream to it. While the stream is locked, no other reader can be acquired until this one is released.

response.headers.get('Content-Length') 得到响应的总长度

ReadableStreamDefaultReader.read() 方法得到一个 Promise 对象，可以获取到流内部序列中的下一个分块，循环调用直到完成，同时收集数据得到一个 Uint8Array 数组

最后转换成 Blob 就可以完成下载了

const videoUrl = 'video url'
const response = await fetch(videoUrl)
const reader = response.body.getReader()
const contentLength = +response.headers.get('Content-Length')
let receivedLength = 0
let chunks = []
while (true) {
    const { done, value } = await reader.read();
    if (done) {
        break
    }
    chunks.push(value)
    receivedLength += value.length
    // 下载进度
    console.log(`Reveived ${receivedLength} of ${contentLength}`)
}
const a = document.createElement("a");
a.style.display = 'none'
document.body.append(a)
const url = window.URL.createObjectURL(new Blob(chunks, { type: 'video/mp4'} ))
a.href = url
a.download = item.name
a.click()
document.body.removeChild(a)
window.URL.revokeObjectURL(url)

用到的一些方法：

fetch()

The global fetch() method starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.

The promise resolves to the Response object representing the response to your request.

A fetch() promise only rejects when a network error is encountered (which is usually when there's a permissions issue or similar). A fetch() promise does not reject on HTTP errors (404, etc.). Instead, a then() handler must check the Response.ok and/or Response.status properties.

WindowOrWorkerGlobalScope is implemented by both Window and WorkerGlobalScope, which means that the fetch() method is available in pretty much any context in which you might want to fetch resources.

The fetch() method is controlled by the connect-src directive of Content Security Policy rather than the directive of the resources it's retrieving.

ReadableStream.getReader()

The getReader() method of the ReadableStream interface creates a reader and locks the stream to it. While the stream is locked, no other reader can be acquired until this one is released.

ReadableStreamDefaultReader.read()

The read() method of the ReadableStreamDefaultReader interface returns a Promise providing access to the next chunk in the stream's internal queue.

URL.createObjectURL()

The URL.createObjectURL() static method creates a string containing a URL representing the object given in the parameter.

The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File object or Blob object.

To release an object URL, call revokeObjectURL().

URL.revokeObjectURL()

The URL.revokeObjectURL() static method releases an existing object URL which was previously created by calling URL.createObjectURL().

Call this method when you've finished using an object URL to let the browser know not to keep the reference to the file any longer.

热门相关：仙城纪照见星星的她薄先生，情不由己霸皇纪网游之逆天飞扬