Qué Diferencia existe entre fetch y XMLHttpRequest en Javascript

Cuando trabajamos con APIs en el desarrollo web, es importante entender las diferencias entre fetch y XMLHttpRequest dos métodos populares para hacer solicitudes HTTP en JavaScript.

Aunque ambos permiten interactuar con servidores, presentan diferencias clave que afectan su uso en proyectos modernos.

¿Qué es XMLHttpRequest?

XMLHttpRequest es una API de JavaScript utilizada para hacer solicitudes HTTP y recuperar datos de un servidor sin recargar la página.

Esto permite actualizar partes específicas de una página web sin interrumpir la experiencia del usuario. A pesar de ser un estándar antiguo, sigue siendo compatible con la mayoría de los navegadores.

El código básico de XMLHttpRequest se ve así:

const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/getPage");
xhr.send();

xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    } else {
        console.error('Error en la solicitud', xhr.status);
    }
};

xhr.onerror = function () {
    console.error('Error de red');
};

Breve historia de XMLHttpRequest

La API de XMLHttpRequest fue desarrollada inicialmente por Microsoft para el componente web de Microsoft Exchange Server 2000 y se introdujo en Internet Explorer en 1999.

Fue adoptada por otros navegadores, como Mozilla, Safari y Opera. Aunque es una tecnología veterana, sigue siendo compatible en los navegadores actuales debido a su amplia adopción y estabilidad.

¿Qué es fetch? ⬆️

Fetch es una API moderna que reemplaza a XMLHttpRequest en muchos casos.

Se introdujo como parte del estándar ECMAScript 6 (ES6) para proporcionar una forma más sencilla, flexible y poderosa de realizar solicitudes HTTP. fetch está basado en Promesas, lo que facilita el trabajo con código asincrónico.

Un ejemplo básico con fetch sería:

fetch('/api/getData')
    .then(response => {
        if (!response.ok) {
            throw new Error('La respuesta de la red no fue correcta');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Hubo un problema con la operación fetch:', error);
    });

Diferencias clave entre fetch y XMLHttpRequest

1. Orientación a Promesas

fetch utiliza Promesas, lo que hace que sea mucho más fácil trabajar con código asincrónico y utilizar then(), catch() o async/await para manejar los resultados de las solicitudes.

El XMLHttpRequest usa un enfoque basado en eventos.

2. Interfaz simplificada

fetch tiene una sintaxis más sencilla y directa. No necesitas crear un objeto ni configurar sus propiedades, como en el caso de XMLHttpRequest.

3. Soporte para nuevas características

fetch soporta objetos Request y Response, que proporcionan métodos convenientes para manipular solicitudes, respuestas y sus transformaciones.

4. Soporte para streams

fetch admite el manejo de flujos de datos, lo que es útil cuando trabajas con grandes volúmenes de información que se reciben progresivamente.

5. Cancelación de solicitudes

Aunque fetch no tiene soporte nativo para cancelar solicitudes, puedes usar un AbortController para hacerlo, lo que proporciona una mayor flexibilidad para manejar las solicitudes.

6. Mejor manejo de errores

En fetch, los errores de red (por ejemplo, conexión fallida) causan el rechazo de la Promesa, mientras que una respuesta de estado 4xx o 5xx no genera un rechazo automático, y debes comprobar el código de estado manualmente.

7. Soporte para CORS

fetch ofrece un manejo más flexible de CORS (Cross-Origin Resource Sharing), lo que permite configuraciones más detalladas y específicas para solicitudes a recursos de dominios externos.

8. Personalización avanzada

fetch ofrece más opciones para personalizar las solicitudes, como definir encabezados, modos de caché y otros parámetros.

Conclusión

En resumen, fetch es la evolución moderna de XMLHttpRequest, ofreciendo una interfaz más limpia, soportando Promesas y brindando características adicionales como el manejo de flujos y mayor flexibilidad en la configuración de las solicitudes.

Si bien XMLHttpRequest sigue siendo útil en algunos casos, la recomendación general es utilizar fetch en nuevos proyectos debido a su simplicidad y características avanzadas.