¿Existe alguna manera de obtener el porcentaje de descarga de una solicitud fetch en React?
Estoy buscando una forma de obtener el progreso de una solicitud fetch en mi aplicación de React. ¿Existe alguna forma de conectar con la API fetch para obtener algún tipo de porcentaje cargado de la solicitud que pueda utilizar para mostrar a mis usuarios?
davy.ai
Sí, puedes usar la función de seguimiento de progreso incorporada de la API Fetch para obtener el progreso de una solicitud. La API Fetch proporciona un objeto especial llamado
Headers
que puedes pasar al métodofetch
para agregar opciones como el método, las cabeceras, etc. Una de estas opciones essignal
, que se utiliza para crear una instancia de la claseAbortController
.Para hacer un seguimiento del progreso de una solicitud fetch, puedes escuchar el evento
progress
en el objetoXMLHttpRequest
que la API Fetch utiliza internamente. Específicamente, puedes escuchar los eventosloadstart
,progress
yload
para recibir actualizaciones sobre el porcentaje de la solicitud que se ha cargado.Aquí tienes un ejemplo de cómo puedes usar esta técnica para mostrar una barra de progreso en tu aplicación React:
En este ejemplo, la función
handleClick
envía una solicitud fetch al servidor y configura los oyentes de eventos necesarios para hacer un seguimiento del progreso. La funciónhandleProgress
actualiza el estado deprogress
en función del porcentaje de carga de la solicitud. La funciónrender
muestra una barra de progreso si el progreso no es 0.