¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

El API fetch de JavaScript

Durante muchos años, nos hemos tenido que conformar usando XMLHttpRequest para hacer peticiones Ajax bien fuera directamente o bien fuera a través de la función $.ajax de jQuery. Este tipo de peticiones, nos han permitido crear nuevos tipos de experiencias interactivas en las páginas.

La intención del API Fetch es la de reemplazar XMLHttpRequest como el recurso por defecto de comunicación con recursos remotos. Veamos cómo funciona este nuevo API y, sobre todo, qué nos aporta para que decidamos (o no) cambiar.

API Fetch

El API nos proporciona una función fetch() definida en el objeto window por lo que la función está disponible globalmente. Esta nos permite realizar peticiones. El método devuelve una Promesa que puedes usar para obtener la respuesta de la petición.

Para demostrar el uso de este API, vamos a usar la pokeapi para obtener datos de un Pokemon e insertar su nombre en la página. Vamos a ver cómo lo haríamos primero con XMLHttpRequest:

var URL = 'https://pokeapi.co/api/v2/pokemon/4/';

var xhr = new XMLHttpRequest();  
xhr.open('GET', URL);  
xhr.responseType = 'json';

xhr.onload = function() {  
  console.log(datos.name); // charmander
};

xhr.onerror = function() {  
  console.log('Falló!');
};

xhr.send();  

Realmente engorroso. ¿No te parece? Veamos cómo hacer lo mismo con fetch().

var URL = 'https://pokeapi.co/api/v2/pokemon/4/';

fetch(URL).then(function(respuesta) {  
  return respuesta.json();
}).then(function(datos) {
  console.log(datos.name); // charmander
}).catch(function() {
  console.log('Falló!');
});

Y si ya nos pasamos a ES6, la cosa mejora aun más:

const URL = 'https://pokeapi.co/api/v2/pokemon/1/';

fetch(URL).then(respuesta => respuesta.json())  
.then(datos => {
  insertaPokemon(datos.name);
}).catch(() => console.log('Falló!'));

Quizá quieras ver este corto vídeo de esto en acción.

El método fetch() recibe la cadena de la URL como único parámetro y nos devuelve una promesa. Cuando la promesa se complete (sea positiva o erróneamente), devuelve un objeto de respuesta el cual tiene un método json() para devolver la respuesta como datos JSON. Dado que respuesta.json() también devuelve una promesa, podemos volver a encadenar el método .then.

La diferencia principal con el método de XMLHttpRequest es que usas eventos en vez de promesas y hacer que comience la petición tiene un par de llamadas más extras en el objeto xhr. Por tanto, nos quedamos con que es un método algo más compacto de hacer lo mismo.

Usos avanzados

Configurando la petición

Por defecto, fetch crea una sencilla petición GET sin ningún otro parámetro. Veamos cómo podemos configurar una petición para cambiarla a nuestro antojo.

fetch(URL, {  
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    nombre: 'Antonio',
    web: 'funcion13.com'
  })
});

Como puedes ver, fetch acepta un segundo parámetro en el que podemos pasar un objeto para configurar la petición. Por defecto, fetch genera una petición con el método GET pero podemos cambiarla a nuestro antojo. Estas son algunas de las opciones que podemos pasar:

  • method - GET, POST, PUT, DELETE o HEAD
  • headers - Cabeceras que queramos añadir a la petición.
  • credentials - ¿Enviamos cookies con la petición?
    • omit si no queremos cookies (es el valor por defecto).
    • same-origin para que las cookies viajen con la petición.
  • cache - Modo de la caché
    • default
    • reload realiza la petición como si no hubiera caché, luego actualiza la caché cuando obtenga la respuesta.
    • no-cache realiza la petición como si no hubiera caché.
    • force-cache usa los resultados de la caché sin importar si la caché había expirado o no. Si no hay resultados anteriores, crea una petición normal.
    • only-if-cache igual que force-cache excepto que si no hay resultado anterior, devolverá un error de red.

Útil, ¿no te parece?

El objeto Request

El segundo parámetro podemos sustituirlo por Request, que acepta los mismos parámetros. Veamos:

var peticion = new Request(URL, {  
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    nombre: 'Antonio',
    web: 'funcion13.com'
  })
});

fetch(peticion);  

La única ventaja que tiene este método, es que podemos crear una nueva modificando algún parámetro:

var peticion = new Request(URL, {  
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    nombre: 'Antonio',
    web: 'funcion13.com'
  })
});

var peticionGET = new Request(peticion, { method: 'GET' });  
fetch(peticionGET);  

El resto de opciones se mantienen pero cambiamos el método.

Gestionando otros tipos de datos

JSON no es siempre lo que queremos. El objeto de la respuesta tiene otros métodos para devolver los datos como nos interesen:

  • text(): Si la petición devuelve texto o HTML, este es el método que querremos usar.
  • blob(): Si quieres cargar una imagen, tenemos que usar blob.

Compatibilidad y otras notas

El API fetch aun no está terminada y aun le faltan cosas como por ejemplo, poder cancelar una petición en curso. Algo que molesta a mucha gente. No obstante, diría que tal y como es, es bastante más usable que XMLHttpRequest.

Fetch está disponible en Chrome desde su versión 42, Opera desde la versión 29, Firefox desde la versión 39 y Edge desde la versión 14. No está soportado ni en Safari ni en Internet Explorer. Si necesitas usarlo en IE o en Safari, vas a tener que usar el polyfill.

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!