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. Isso é possível e fácil de implementar utilizando o Axios.
Vamos como codar essa funcionalidade.
Mensurando o Progresso de Upload na Prática
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.
Como estamos lidando com uma Promises, no final da execução o método Then é executado e conseguimos informar que o arquivo já foi enviado.
Se houver algum erro, o método Catch é executado, assim podemos imprimir no log o erro.
Até aqui entendemos a lógica de como funciona o progresso do envio de arquivos.
No código abaixo vamos explorar um pouco mais sobre o assunto, mostrando um trecho de código que foi utilizado no exemplo de caso de uso.
Cras suscipit in ligula
Praesent faucibus felis vel arcu rhoncus consectetur sed eget ex. Aliquam erat volutpat. Donec vel diam id urna ornare commodo varius vitae tortor. Donec id congue sapien. Duis ac fringilla tellus. In sed lobortis enim. Integer ut vestibulum purus, laoreet auctor sapien. Ut cursus aliquam nulla ac rhoncus. Proin facilisis diam placerat ante volutpat finibus. Maecenas semper cursus lorem.
Vivamus quis efficitur ipsum. Quisque sit amet iaculis leo. Duis dignissim erat arcu, eget maximus lorem aliquam id. Maecenas odio libero, tristique a lorem vel, ultricies fermentum ipsum. Sed ac eleifend mauris. Ut semper velit vel risus efficitur ullamcorper. Duis dignissim suscipit purus commodo varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus cursus tellus non neque accumsan, sit amet consectetur mi molestie. Fusce sit amet rutrum nunc. Nulla et sapien sollicitudin, hendrerit elit nec, ultricies tortor. In tincidunt ante arcu, a placerat elit suscipit in. Sed vel nulla lacus. Aliquam at enim nunc. Duis sit amet viverra libero.