javascript - node - Fetch API vs XMLHttpRequest

fetch response

Question

Sé que Fetch API usa Promise sy ambos te 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?

Answer 1

ha podido recuperar

• Falta un método incorporado para consumir documentos
• no hay forma de establecer un tiempo de espera yet
• no puede anular el encabezado de respuesta de tipo de contenido
• Si el encabezado de respuesta de longitud de contenido está presente pero no está expuesto , se desconoce la longitud total del cuerpo durante la transmisión
• llamará al controlador de cancelación de la señal incluso si la solicitud se ha completado

XHR

• no hay forma de no enviar cookies (aparte de usar el indicador no estándar mozAnon o el constructor AnonXMLHttpRequest )
• no se pueden devolver instancias de FormData
• no tiene un equivalente al modo no-cors fetch
• siempre siga las redirecciones

Answer 2

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 , 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.

Answer 3

Las respuestas anteriores son buenas y proporcionan buenas ideas, pero comparto la misma opinión que 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 que se devuelve de 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) => { ... });