Recuperar API vs XMLHttpRequest

Sé que Fetch API usa Promisesy ambos le permiten hacer solicitudes AJAX a un servidor.

He leído que Fetch API tiene algunas características adicionales, que no están disponibles en XMLHttpRequest(y en el polyfill de Fetch API, ya que está basado en XHR).

¿Qué capacidades adicionales tiene la API Fetch?

Hay algunas cosas que puede hacer con fetch y no con XHR:

• Puede usar la API de caché con los objetos de solicitud y respuesta;
• Puede realizar no-corssolicitudes, obteniendo una respuesta de un servidor que no implementa CORS. No puede acceder al cuerpo de respuesta directamente desde JavaScript, pero puede usarlo con otras API (por ejemplo, la API de caché);
• Transmisión de respuestas (con XHR, toda la respuesta está almacenada en la memoria, con fetch podrá acceder a la transmisión de bajo nivel) Esto aún no está disponible en todos los navegadores, pero lo estará pronto.

Hay un par de cosas que puedes hacer con XHR que aún no puedes hacer con fetch, pero estarán disponibles tarde o temprano (lee el párrafo "Mejoras futuras" aquí: https: //hacks.mozilla .org / 2015/03 / this-api-is-so-fetching / ):

• Cancelar una solicitud (esto ahora funciona en Firefox y Edge, como explica @sideshowbarker en su comentario);
• Informar sobre el progreso.

Este artículo https://jakearchibald.com/2015/thats-so-fetch/ contiene una descripción más detallada.

ir a buscar

• Falta un método incorporado para consumir documentos
• no hay forma de establecer un tiempo de espera todavía
• no puede anular el encabezado de respuesta de tipo de contenido
• si el encabezado de respuesta de longitud de contenido está presente pero no expuesto , la longitud total del cuerpo se desconoce durante la transmisión
• llamará al controlador de cancelación de la señal incluso si la solicitud se ha completado
• sin progreso de carga (soporte para ReadableStreaminstancias ya que los cuerpos de solicitud aún están por llegar )

XHR

• no hay forma de no enviar cookies (aparte de usar el indicador no estándarmozAnon o el AnonXMLHttpRequestconstructor)
• no puede devolver FormDatainstancias
• no tiene un equivalente a fetch's no-corsmodo de
• siempre siga las redirecciones

Las respuestas anteriores son buenas y proporcionan buenas ideas, pero comparto la misma opinión que la que compartí en esta entrada del blog de desarrolladores de Google en que la principal diferencia (desde una perspectiva práctica) es la conveniencia de la promesa incorporada devuelta defetch

En lugar de tener que escribir código como este

function reqListener() {
    var data = JSON.parse(this.responseText);
}

function reqError(err) { ... }

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

podemos limpiar las cosas y escribir algo un poco más conciso y legible con promesas y sintaxis moderna

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });