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 solicitudes no-cors y obtener una respuesta de un servidor que no implementa CORS. No puede acceder al cuerpo de la respuesta directamente desde JavaScript, pero puede usarlo con otras API (por ejemplo, la API de caché);
• Respuestas de transmisión (con XHR, la respuesta completa se almacena en la memoria, con fetch podrá acceder a la transmisión de bajo nivel). Esto no está disponible todavía en todos los navegadores, pero lo estará pronto.

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

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

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

buscar

• falta un método incorporado para consumir documentos
• no hay forma de establecer un tiempo de espera todavía
• no se 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
• no hay progreso de carga (el soporte para instancias de ReadableStream como cuerpos de solicitud aún está por llegar )
• no es compatible --allow-file-access-from-files (chromium)

XHR

• no hay forma de no enviar cookies (aparte de usar el indicador mozAnon no estándar o el constructor AnonXMLHttpRequest )
• no puede devolver instancias FormData
• no tiene un equivalente al modo no-cors de fetch
• sigue siempre los redireccionamientos

Las respuestas anteriores son buenas y brindan buenos conocimientos, pero comparto la misma opinión que se comparte en esta entrada del blog de desarrolladores de Google en el sentido de que la principal diferencia (desde una perspectiva práctica) es la conveniencia de la promesa incorporada devuelta por fetch

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) => { ... });