Carregar indicadores de progresso para buscar?

Estou lutando para encontrar documentação ou exemplos de implementação de um indicador de progresso de upload usando fetch .

Esta é a única referência que encontrei até agora , que afirma:

Os eventos de progresso são um recurso de alto nível que não chegará em busca por enquanto. Você pode criar o seu próprio olhando para o Content-Lengthcabeçalho e usando um fluxo de passagem para monitorar os bytes recebidos.

Isso significa que você pode lidar explicitamente com as respostas, sem ser Content-Lengthdiferente. E, claro, mesmo se Content-Lengthestiver lá, pode ser mentira. Com os streams, você pode lidar com essas mentiras da maneira que quiser.

Como eu escreveria "um fluxo de passagem para monitorar os bytes" enviados? Se fizer alguma diferença, estou tentando fazer isso para fazer uploads de imagens do navegador para Cloudinary .

NOTA : Eu estou não interessados na biblioteca Cloudinary JS , uma vez que depende jQuery e meu aplicativo não. Estou interessado apenas no processamento de stream necessário para fazer isso com javascript nativo e fetchpolyfill do Github .

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

Os fluxos estão começando a chegar à plataforma da web ( https://jakearchibald.com/2016/streams-ftw/ ), mas ainda é cedo.

Em breve, você poderá fornecer um fluxo como o corpo de uma solicitação, mas a questão em aberto é se o consumo desse fluxo está relacionado aos bytes carregados.

Redirecionamentos específicos podem resultar na retransmissão de dados para o novo local, mas os fluxos não podem "reiniciar". Podemos corrigir isso transformando o corpo em um retorno de chamada que pode ser chamado várias vezes, mas precisamos ter certeza de que expor o número de redirecionamentos não é um vazamento de segurança, já que seria a primeira vez na plataforma JS poderia detectar isso.

Alguns estão questionando se faz sentido vincular o consumo de stream aos bytes carregados.

Resumindo: isso ainda não é possível, mas no futuro isso será tratado por streams ou algum tipo de retorno de chamada de nível superior transmitido fetch().

Minha solução é usar axios , que suporta isso muito bem:

      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,
        //})
      })

Eu tenho um exemplo para usar isso no react no github.

Não acho que seja possível. O rascunho declara:

atualmente falta [ em comparação com XHR ] quando se trata de solicitar progressão

(resposta antiga):
O primeiro exemplo no capítulo Fetch API dá algumas dicas sobre como:

Se você deseja receber os dados corporais progressivamente:

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))

Além do uso do Promiseantipadrão de construtor , você pode ver que response.bodyé um Stream do qual você pode ler byte por byte usando um Reader e pode disparar um evento ou fazer o que quiser (por exemplo, registrar o progresso) para cada um deles.

No entanto, a especificação do Streams não parece estar totalmente concluída e não tenho ideia se isso já funciona em qualquer implementação de busca.

Atualização: como diz a resposta aceita, é impossível agora. mas o código abaixo tratou do nosso problema por algum tempo. Devo acrescentar que pelo menos tivemos que passar a usar uma biblioteca baseada em 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');
}

graças a este link: https://jakearchibald.com/2016/streams-ftw/

Uma vez que nenhuma das respostas resolve o problema.

Apenas para fins de implementação, você pode detectar a velocidade de upload com um pequeno pedaço inicial de tamanho conhecido e o tempo de upload pode ser calculado com content-length / upload-speed. Você pode usar este tempo como estimativa.

Uma possível solução alternativa seria utilizar o new Request()construtor e verificar o Request.bodyUsed Booleanatributo

O bodyUsedgetter do atributo deve retornar verdadeiro se disturbed, e falso caso contrário.

para determinar se o fluxo é distributed

BodyDiz-se disturbedque um objeto que implementa o mixin bodyé não nulo e streamé disturbed.

Retorne a chamada recursiva fetch() Promisede dentro .then()encadeada para quando for igual a ..read()ReadableStreamRequest.bodyUsedtrue

Observe que a abordagem não lê os bytes do Request.bodyconforme os bytes são transmitidos para o terminal. Além disso, o upload pode ser concluído muito antes de qualquer resposta ser retornada por completo ao 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}%`;
}

A parte principal é ReadableStream ≪ obj_response .body≫.

Amostra:

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() ))

Você pode testar sua execução em uma página enorme, por exemplo, https://html.spec.whatwg.org/ e https://html.spec.whatwg.org/print.pdf . CtrlShiftJ e carregue o código em.

(Testado no Chrome.)