Загрузить файл с API-интерфейсом Fetch в Javascript и показать прогресс

Question

Я использую Fetch API в Javascript для загрузки большого файла на сервер. Есть ли какое-либо событие в Fetch API, которое я мог бы использовать для отслеживания хода загрузки?

Answer 1

Это NOT возможно. Причина в том, как работает API Fetch.

Метод fetch возвращает обещание; API Promise использует метод then, к которому вы можете присоединить обратные вызовы «успех» и «отказ». Поэтому вы можете получить доступ к прогрессу.

Тем не менее, не теряйте надежды! Существует обходное решение, которое может сделать трюк (я нашел его в репозитории github API-интерфейса Fetch):

вы можете преобразовать запрос в запрос потока, а затем, когда ответный ответ - это просто битаррей содержимого файла. то вам необходимо собрать все данные и, когда его конец расшифровать файл, который вы хотите

function consume(stream, total = 0) { 
    while (stream.state === "readable") { 
    var data = stream.read() 
    total += data.byteLength; 
    console.log("received " + data.byteLength + " bytes (" + total + " bytes in total).") 
    } 
    if (stream.state === "waiting") { 
    stream.ready.then(() => consume(stream, total)) 
    } 
    return stream.closed 
} 
fetch("/music/pk/altes-kamuffel.flac") 
    .then(res => consume(res.body)) 
    .then(() => console.log("consumed the entire body without keeping the whole thing in memory!")) 
    .catch((e) => console.error("something went wrong", e))