Vamos mostrar na prática como obter o progresso de cada requisição HTTP sendo feita através do método POST, do front end para o back end utilizando o Axios.
Caso de uso
Imagine que você tem um app front end que faz upload de arquivos para um servidor. Você quer acompanhar e mostrar ao usuário o progresso do envio desses arquivos, como no exemplo abaixo:
Isso é possível e fácil de implementar utilizando o Axios.
Vamos como codar essa funcionalidade.
Mensurando o Progresso de Upload na Prática
Sintaxe básica:
// Utilizando axios import axios from axios; // Criando um FormData que armazena a imagem (arquivo) const data = new FormData(); data.append("file", file, filename); // Fazendo a requisição para o servidor com método POST // Enviando o arquivo que está na variável data // Passando um objeto de configuração que possui um método onUploadProgress axios .post("https://my.server.com/posts", data, { onUploadProgress: (event) => { let progress: number = Math.round( (event.loaded * 100) / event.total ); console.log( `A imagem ${filename} está ${progress}% carregada... ` ); }, }) .then((response) => { console.log( `A imagem ${filename} já foi enviada para o servidor!` ); }) .catch((err) => { console.error( `Houve um problema ao realizar o upload da imagem ${filename} no servidor AWS` ); console.log(err); });
Basicamente é realizado uma requisição do tipo POST utilizando o Axios, passando a variável data, com o arquivo. Passamos também um objeto com a configuração da requisição. Nele contém o método onUploadProgress que recebe um event, esse event contém as propriedades loaded e total.
loaded é o quanto já foi carregado e total armazena o tamanho total do arquivo.
Então é feito um cálculo de regra de três para definir a percentagem que já foi carregada no servidor. A variável progress armazena esses valores conforme a função onUploadProgress é executada automaticamente.