Como Usar Fetch en Javascript Correctamente

Fetch es una funcion para realizar consultas HTTP de recibir o enviar datos a el servidor, un remplazo poderoso para el anterior XMLHttpRequest.

💡 ¿Quieres aprender más? Este artículo es parte de nuestra Recopilación de Plugins JavaScript y jQuery → donde encontrarás más de 20 tutoriales gratuitos esperándote para llevar tus habilidades al siguiente nivel.

La funcion fetch esta basada en promesas de javascript es decir es una funcion asincrona que evalua el exito o falla de una operacion.

Los principales usos de fetch son:

• Consumo de APIs con GET
• Envio de Datos por POST o PUT
• Peticiones Asincronas, es decir se ejecuta sin interrumpir el flujo normal de la app
• Procesar respuestas, convierte en formato json, texto o blob

Sintaxis Basica para Recibir Datos

La sintaxis basica solo involucra una URL y por defecto se usa el metodo GET para recibir los datos.

Si la promesa se cumple entonces al siguiente paso, recibimos los datos y los convertimos en JSON, lo cual tambien es una promesa.

Si el paso anterior se cumple entonces ahora procesamos los datos recibidos, puede ser mostrando en la pantalla o en una tabla, etc.

Y por ultimo si algo falla en cualquier paso se lanza un error y lo cachamos y mostramos el error.

fetch('https://jsonplaceholder.typicode.com/todos/1') // Ejecutamos la peticion
    .then(response => response.json()) // Recivimos la respuesta y la convertimos en json
    .then(data => { // el resultado anterior lo mostramos en consola y en un elemento html
        console.log(data);
        document.getElementById('data').innerHTML = JSON.stringify(data);
    })
    .catch(error => console.error(error)); // Si ocurre un error mostramos el error

El resultado:

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

En pocas palabras fetch hace mas facil las peticiones a APIs y servicios y evitamos usar XMLHttpRequest o el $.get , $.ajax de jQuery.

La funcion .catch() atrapa cualquier error en la red que impide que la solicitud se complete correctamente y asi mostrarle al usuario la alerta correspondiente.

Al ser una API nativa del navegador o de javascript fetch es soportada por la mayoria de navegadores modernos y es usada en frameworks como React y Vue.js

En nuestro articulo CRUD en React usamos la funcion fetch para hacer peticiones al servidor.

Mas informacion: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

¿Necesitas un software de ventas listo para producción?

Inventio Max es la solución profesional con soporte para múltiples almacenes, reportes avanzados y gestión de usuarios.

Ver Inventio Max – Sistema de Inventario y Ventas Profesional →