Describiremos API Fetch: qué es y para qué sirve, ya que, si se está trabajando con marcos de JavaScript, lo más probable es que se utilice API Fetch para hacerlo.
API Fetch: qué es
Es un nuevo estándar brinda opciones para interactuar por HTTP, con un diseño basado en promesas, con mayor flexibilidad y capacidad de control cuando se realicen llamadas al servidor, y que funciona tanto en Window como desde Worker.
Eestá disponible en Node, por lo que podemos utilizarlo de forma isomórfica, es decir, tanto en cliente como en servidor.
¿Cómo funciona?
El API Fetch está soportado de forma nativa por Edge 14, Firefox 39, Chrome 42 y Opera 29. Para Internet Explorer 10 o Safari 6.1 o superiores o versiones anteriores de Firefox o Chrome, se puede utilizar el polyfill publicado por Github https://github.com/github/fetch.
Funciona mediante promesas, ya que devuelve un objeto con dos métodos, uno then () y otro catch() a la que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.
Es importante aclarar que si se devuelve un código HTTP correspondiente a un error no se ejecutará el catch (), ya que se ha obtenido una respuesta válida, por lo que se ejecutará el then (). Sólo si hay un error de red o de otro tipo se ejecutará el catch ().
Un aspecto importante es que para obtener el body o cuerpo del mensaje devuelto por el servidor se debe obtener una segunda promesa por medio de los métodos del objeto Response. Por ello será muy habitual ver dos promesas encadenadas, una para el fetch() y otra con el retorno del método que utilicemos para obtener el body.
Para qué sirve
Proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global fetch() que proporciona una forma lógica de obtener recursos de forma asíncrona por la red.
Este tipo de funcionalidad se conseguía anteriormente haciendo uso de XMLHttpRequest. Fetch proporciona una alternativa mejor que puede ser empleada por otras tecnologías como Service Workers.
También aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP.
La especificación fetch es diferente a JQuery.ajax() en dos formas principales:
El objeto Promise devuelto desde fetch() no será rechazado con un estado de error HTTP incluso si la respuesta es un error HTTP 404 o 500. En cambio, se resolverá (con un estado ok configurado a false), y será solo rechazado ante una falla de red.
Por defecto, fetch no enviará ni recibirá cookies del servidor, resultando en peticiones no autenticadas si el sitio permite mantentener una sesión de usuario (para mandar cookies, credentials de la opción init deberan ser configuradas).
Una petición básica de fetch es simple de realizar, como es el siguiente código:
fetch(‘http://example.com/movies.json’)
.then(response => response.json())
.then(data => console.log(data));
Aquí estamos recuperando un archivo JSON a través de red e impriminedo en la consola. El uso de fetch()simple toma un argumento (la ruta del recurso que quieres buscas) y devuelve un objeto Promise conteniendo la respuesta, un objeto Response.
Esto es, por supuesto, una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método json() (definido en el mixin de Body, el cual está implementado por los objetos Request y Response).
Leíste: API Fetch: qué es y para qué sirve, te recomendamos: NFC: qué es y para qué sirve
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode
