Cómo monitorear el progreso usando XMLHttpRequest (XHR)

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.