Entendiendo la Fetch API

Ahora ya no usamos Ajax para hacer peticiones al server ahora usamos Fetch. Por que ? por que nos permite usar promesas en lugar de callbacks, permitiendo un codigo mas limpio.

Una peticion con fetch basica es de la siguiente manera:

fetch('./api/some.json').then(function(respond){
    //exito
}).catch(function(err) { 
    //Error en la peticion
});

La promesa se mira en accion con los metodos "then" y "catch", a los cuales se le pasa metodos para ser ejecutados cuando terminen.

Then : Es ejecutado cuando la peticion termina correctamente.
catch: Es ejecutado cuando en la peticion ocurrio un error.

Fetch retorna un objecto stream cuando la peticion es exitosa, el cual tiene muchos metodos para usar. Puedes consultarlos aqui. El ejemplo completo seria asi:

fetch('./api/some.json').then(function(response) { 
   
    if (response.status !== 200) { 
      console.log('Looks like there was a problem. Status Code: ' + 
        response.status); 
      return; 
    }

    // Examine the text in the response 
    response.json().then(function(data) { 
      console.log(data); 
    }); 

}).catch(function(err) { 
  console.log('Fetch Error :-S', err); 
});

Otras propiedades interesantes del objecto response son:

fetch('users.json').then(function(response) {  
    console.log(response.headers.get('Content-Type'));  
    console.log(response.headers.get('Date'));

    console.log(response.status);  
    console.log(response.statusText);  
    console.log(response.type);  
    console.log(response.url);  
});

El objecto response puede ser de varios tipos para una mejor descripcion visita este link.


Adicionalmente puedes usar los objectos "Request" y "Header" para personalizar los peticiones fetch. Tomando un ejemplo de david walsh, seria asi:

// Create an empty Headers instance
var headers = new Headers();

// Add a few headers
headers.append('Content-Type', 'text/plain');
headers.append('X-My-Custom-Header', 'CustomValue');

// Check, get, and set header values
headers.has('Content-Type'); // true
headers.get('Content-Type'); // "text/plain"
headers.set('Content-Type', 'application/json');

// Delete a header
headers.delete('X-My-Custom-Header');

// Add initial values
var headers = new Headers({
  'Content-Type': 'text/plain',
  'X-My-Custom-Header': 'CustomValue'
});

var request = new Request('https://davidwalsh.name/some-url', {
  headers: new Headers({
    'Content-Type': 'text/plain'
  })
});

fetch(request).then(function() { /* handle response */ });

Es una manera facil y alternativa del uso de ajax.

Links:

https://davidwalsh.name/fetch
https://developers.google.com/web/updates/2015/03/introduction-to-fetch
https://developer.mozilla.org/en/docs/Web/API/Fetch_API
https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/ 

Te gusto este articulo ? Suscribete para recibir mis ultimas noticias