web-dev-qa-db-fra.com

Comment obtenir la progression du téléchargement de fichiers avec les flux fetch () et WhatWG

Remarque: je ne recherche aucune alternative. Je sais que cela peut être fait avec XMLHttpRequest. Je ne me soucie pas non plus du support du navigateur. Je veux juste en savoir plus sur les normes nouvelles/à venir.

J'ai un objet File et je peux le télécharger avec PUT en utilisant fetch comme ceci:

fetch(url, {
    method: "PUT",
    body: fileObject,
});

Comment puis-je obtenir la progression du téléchargement à partir de cela?

D'après ce que je comprends, le body des options de récupération peut être un ReadableStream . Alors peut-être qu'il existe un moyen d'envelopper l'objet File dans un ReadableStream et d'obtenir l'état d'avancement de cela?

Par exemple. quelque chose comme ça

fetch(url, {
    method: "PUT",
    body: asReadableStream(fileObject, onProgress),
});

Merci.

javascriptfetch-apiwhatwg-streams-api
13
Epeli

Comme l'a dit Kyle, le téléchargement de ReadableStream n'est pas encore pris en charge. https://github.com/whatwg/fetch/issues/95

Même si cela était possible, je n'essaierais pas de surveiller la progression du téléchargement via les flux, (c'est-à-dire si FetchObserver devient une chose) Personne ne travaille dessus pour le moment. Mais Mozilla a fait une proposition qui ressemble à ceci.

/*
enum FetchState {
  // Pending states
  "requesting", "responding",

  // Final states
  "aborted", "errored", "complete"
};
*/

fetch(url, {
  observe(observer) { 
    observer.onresponseprogress = e => console.log(e);
    observer.onrequestprogress = e => console.log(e);
    observer.onstatechange = n => console.log(observer.state)
  }
)

Je me souviens que je l'ai testé en utilisant des indicateurs expérimentaux il y a longtemps mais que je ne trouve plus la démo, je suppose qu'ils l'ont supprimée de MDN car il y avait sa propre implémentation/suggestion.

7
Endless

Réponse courte: impossible à faire pour le moment.

Vérifiez les spécifications ici: https://fetch.spec.whatwg.org/#fetch-api

La deuxième phrase indique qu'il n'y a aucun moyen de suivre la progression de la demande lors de l'utilisation de la récupération.

La méthode fetch () est une API de niveau relativement bas pour récupérer des ressources. Il couvre un peu plus de terrain que XMLHttpRequest, bien qu'il manque actuellement en ce qui concerne la progression de la demande (pas la progression de la réponse).

2
Kyle