¿Subir indicadores de progreso para recuperar?

Estoy luchando por encontrar documentación o ejemplos de implementación de un indicador de progreso de carga usando fetch .

Esta es la única referencia que he encontrado hasta ahora , que dice:

Los eventos de progreso son una característica de alto nivel que no llegará a buscar por ahora. Puede crear el suyo propio mirando el Content-Lengthencabezado y utilizando un flujo de transferencia para monitorear los bytes recibidos.

Esto significa que puede manejar explícitamente las respuestas sin una forma Content-Lengthdiferente. Y, por supuesto, incluso si Content-Lengthestá ahí, puede ser una mentira. Con las corrientes puedes manejar estas mentiras como quieras.

¿Cómo escribiría "un flujo de paso a través para monitorear los bytes" enviados? Si hace algún tipo de diferencia, estoy tratando de hacer esto para impulsar la carga de imágenes desde el navegador a Cloudinary .

NOTA : estoy no interesado en la biblioteca Cloudinary JS , ya que depende de jQuery y mi aplicación no lo hace. Solo estoy interesado en el procesamiento de transmisión necesario para hacer esto con javascript nativo y fetchpolyfill de Github .

https://fetch.spec.whatwg.org/#fetch-api

Las transmisiones están comenzando a aterrizar en la plataforma web ( https://jakearchibald.com/2016/streams-ftw/ ) pero aún son los primeros días.

Pronto podrá proporcionar un flujo como el cuerpo de una solicitud, pero la pregunta abierta es si el consumo de ese flujo se relaciona con los bytes cargados.

Los redireccionamientos particulares pueden resultar en la retransmisión de datos a la nueva ubicación, pero los flujos no pueden "reiniciarse". Podemos solucionar esto convirtiendo el cuerpo en una devolución de llamada que se puede llamar varias veces, pero debemos estar seguros de que exponer la cantidad de redireccionamientos no es una fuga de seguridad, ya que sería la primera vez en la plataforma que JS podría detectar eso.

Algunos se preguntan si tiene sentido vincular el consumo de flujo con los bytes cargados.

En pocas palabras: esto aún no es posible, pero en el futuro se manejará mediante transmisiones o mediante algún tipo de devolución de llamada de nivel superior fetch().

Mi solución es usar axios , que admite esto bastante bien:

      axios.request( {
        method: "post", 
        url: "/aaa", 
        data: myData, 
        onUploadProgress: (p) => {
          console.log(p); 
          //this.setState({
            //fileprogress: p.loaded / p.total
          //})
        }


      }).then (data => {
        //this.setState({
          //fileprogress: 1.0,
        //})
      })

Tengo un ejemplo para usar esto en reaccionar en github.

No creo que sea posible. El borrador dice:

actualmente falta [ en comparación con XHR ] cuando se trata de solicitar progresión

(respuesta anterior):
el primer ejemplo en el capítulo Fetch API brinda información sobre cómo:

Si desea recibir los datos corporales de forma progresiva:

function consume(reader) {
  var total = 0
  return new Promise((resolve, reject) => {
    function pump() {
      reader.read().then(({done, value}) => {
        if (done) {
          resolve()
          return
        }
        total += value.byteLength
        log(`received ${value.byteLength} bytes (${total} bytes in total)`)
        pump()
      }).catch(reject)
    }
    pump()
  })
}

fetch("/music/pk/altes-kamuffel.flac")
  .then(res => consume(res.body.getReader()))
  .then(() => log("consumed the entire body without keeping the whole thing in memory!"))
  .catch(e => log("something went wrong: " + e))

Aparte de su uso del Promiseconstructor antipattern , puede ver queresponse.body es un Stream desde el que puede leer byte a byte usando un Reader, y puede disparar un evento o hacer lo que quiera (por ejemplo, registrar el progreso) para cada uno de ellos.

Sin embargo, la especificación de Streams no parece estar del todo terminada, y no tengo idea de si esto ya funciona en alguna implementación de recuperación.

Actualización: como dice la respuesta aceptada, ahora es imposible. pero el siguiente código solucionó nuestro problema durante algún tiempo. Debo agregar que al menos tuvimos que cambiar al uso de una biblioteca basada en XMLHttpRequest.

const response = await fetch(url);
const total = Number(response.headers.get('content-length'));

const reader = response.body.getReader();
let bytesReceived = 0;
while (true) {
    const result = await reader.read();
    if (result.done) {
        console.log('Fetch complete');
        break;
    }
    bytesReceived += result.value.length;
    console.log('Received', bytesReceived, 'bytes of data so far');
}

gracias a este enlace: https://jakearchibald.com/2016/streams-ftw/

Dado que ninguna de las respuestas resuelve el problema.

Solo por el bien de la implementación, puede detectar la velocidad de carga con una pequeña porción inicial de tamaño conocido y el tiempo de carga se puede calcular con la longitud del contenido / la velocidad de carga. Puede utilizar este tiempo como estimación.

Una posible solución sería utilizar el new Request()constructor y luego verificar el Request.bodyUsed Booleanatributo

El bodyUsedcaptador del atributo debe devolver verdadero si disturbedy falso en caso contrario.

para determinar si la transmisión es distributed

Se Bodydice que un objeto que implementa el mixin es disturbedif bodyno es nulo y lo streames disturbed.

Devuelve el fetch() Promisedesde dentro .then()encadenado a la .read()llamada recursiva de ReadableStreamcuando Request.bodyUsedes igual a true.

Tenga en cuenta que el enfoque no lee los bytes de Request.bodylos bytes a medida que se transmiten al punto final. Además, la carga podría completarse mucho antes de que se devuelva la respuesta completa al navegador.

const [input, progress, label] = [
  document.querySelector("input")
  , document.querySelector("progress")
  , document.querySelector("label")
];

const url = "/path/to/server/";

input.onmousedown = () => {
  label.innerHTML = "";
  progress.value = "0"
};

input.onchange = (event) => {

  const file = event.target.files[0];
  const filename = file.name;
  progress.max = file.size;

  const request = new Request(url, {
    method: "POST",
    body: file,
    cache: "no-store"
  });

  const upload = settings => fetch(settings);

  const uploadProgress = new ReadableStream({
    start(controller) {
        console.log("starting upload, request.bodyUsed:", request.bodyUsed);
        controller.enqueue(request.bodyUsed);
    },
    pull(controller) {
      if (request.bodyUsed) {
        controller.close();
      }
      controller.enqueue(request.bodyUsed);
      console.log("pull, request.bodyUsed:", request.bodyUsed);
    },
    cancel(reason) {
      console.log(reason);
    }
  });

  const [fileUpload, reader] = [
    upload(request)
    .catch(e => {
      reader.cancel();
      throw e
    })
    , uploadProgress.getReader()
  ];

  const processUploadRequest = ({value, done}) => {
    if (value || done) {
      console.log("upload complete, request.bodyUsed:", request.bodyUsed);
      // set `progress.value` to `progress.max` here 
      // if not awaiting server response
      // progress.value = progress.max;
      return reader.closed.then(() => fileUpload);
    }
    console.log("upload progress:", value);
    progress.value = +progress.value + 1;
    return reader.read().then(result => processUploadRequest(result));
  };

  reader.read().then(({value, done}) => processUploadRequest({value,done}))
  .then(response => response.text())
  .then(text => {
    console.log("response:", text);
    progress.value = progress.max;
    input.value = "";
  })
  .catch(err => console.log("upload error:", err));

}

const req = await fetch('./foo.json');
const total = Number(req.headers.get('content-length'));
let loaded = 0;
for await(const {length} of req.body.getReader()) {
  loaded = += length;
  const progress = ((loaded / total) * 100).toFixed(2); // toFixed(2) means two digits after floating point
  console.log(`${progress}%`); // or yourDiv.textContent = `${progress}%`;
}

La parte clave es ReadableStream ≪ obj_response .body≫.

Muestra:

let parse=_/*result*/=>{
  console.log(_)
  //...
  return /*cont?*/_.value?true:false
}

fetch('').
then(_=>( a/*!*/=_.body.getReader(), b/*!*/=z=>a.read().then(parse).then(_=>(_?b:z=>z)()), b() ))

Puede probar su ejecución en una página enorme, por ejemplo, https://html.spec.whatwg.org/ y https://html.spec.whatwg.org/print.pdf . CtrlShiftJ y cargue el código en formato.

(Probado en Chrome).