XMLHttpRequest (XHR) nos permite escuchar varios eventos que pueden ocurrir mientras se procesa la solicitud HTTP. Esto incluye notificaciones de error, notificaciones de progreso periódicas, notificaciones de cancelación de solicitud y más.
En este artículo, aprenderá a supervisar la descarga del archivo y la carga progreso utilizando eventos XHR en JavaScript.
Supervisar el progreso de la descarga
Uno de esos eventos es progress
que se activa cuando comienza la descarga. Por ejemplo, cuando publicas algo, XMLHttpRequest
primero cargará nuestros datos (el cuerpo de la solicitud) al servidor y luego descargará la respuesta.
Puedes usar este evento junto con load
para realizar un seguimiento del estado de descarga del archivo. Aquí hay un ejemplo:
const xhr = new XMLHttpRequest();
// listen for `load` event
xhr.onload = () => {
console.log(`The transfer is completed: ${xhr.status} ${xhr.response}`);
};
// listen for `error` event
xhr.onerror = () => {
console.error('Download failed.');
}
// listen for `abort` event
xhr.onabort = () => {
console.error('Download cancelled.');
}
// listen for `progress` event
xhr.onprogress = (event) => {
// event.loaded returns how many bytes are downloaded
// event.total returns the total number of bytes
// event.total is only available if server sends `Content-Length` header
console.log(`Downloaded ${event.loaded} of ${event.total} bytes`);
}
// open and send request
xhr.open('GET', '/download-attachment');
xhr.send();
Como puede ver arriba, hemos agregado varios detectores de eventos para eventos que se pueden activar al descargar datos del servidor usando XMLHttpRequest
.
El controlador de eventos de progreso, especificado por xhr.onprogress
La función anterior obtiene el número total de bytes para transferir, así como el número de bytes transferidos hasta ahora en el total
del evento. y loaded
propiedades.
Supervisar el progreso de carga
XMLHttpRequest
proporciona eventos de progreso para las transferencias de carga y descarga. Los eventos de descarga se activan directamente en el XMLHttpRequest
objeto, como hemos visto en el ejemplo anterior.
Para las transferencias de carga, los eventos se activan en el objeto XMLHttpRequest.upload; un objeto sin métodos, existe exclusivamente para rastrear eventos de carga.
El objeto de carga proporciona sus propios eventos similares a XMLHttpRequest
que se puede usar para monitorear la carga. Aquí hay un ejemplo:
const xhr = new XMLHttpRequest();
// listen for `upload.load` event
xhr.upload.onload = () => {
console.log(`The upload is completed: ${xhr.status} ${xhr.response}`);
};
// listen for `upload.error` event
xhr.upload.onerror = () => {
console.error('Upload failed.');
}
// listen for `upload.abort` event
xhr.upload.onabort = () => {
console.error('Upload cancelled.');
}
// listen for `progress` event
xhr.upload.onprogress = (event) => {
// event.loaded returns how many bytes are downloaded
// event.total returns the total number of bytes
// event.total is only available if server sends `Content-Length` header
console.log(`Uploaded ${event.loaded} of ${event.total} bytes`);
}
// open request
xhr.open('POST', '/upload-file');
// prepare a file object
const files = document.querySelector('[name=file]').files;
const formData = new FormData();
formData.append('avatar', files[0]);
// send request
xhr.send(formData);
Eche un vistazo al tutorial sobre cómo cargar archivos usando XHR para ver un ejemplo práctico de carga de archivos en JavaScript.