Proyecto conversor de divisas usando una API con JavaScript

Peticiones con fetch()

Nuestra última tarea en este proyecto es recopilar los valores de cambio de las divisas en tiempo real a través del enlace a la API del servicio Exange Rates.

JavaScript integra una función llamada fetch() que permite realizar peticiones web como si fuéramos nosotros y capturar la respuesta para manipular los datos resultantes.

La estructura básica de una petición con fetch es siempre la misma, por lo que no es necesario memorizarla, basta con entender qué hace.

Vamos a hacer nuestra petición al cargar el script:

scripts.js

let url = 'https://api.exchangeratesapi.io/latest?symbols=USD,GBP,JPY';

fetch(url)
.then(function (response) { 
  return response.json()
}) 
.then(function (data) { 
  console.log(data);
})
.catch(function (error) { 
  console.error(error); 
})

La lógica siempre es:

  • Realizar la petición.
  • Esperar a tener la respuesta y transformarla a datos manipulables.
  • Esperar a tener los datos manipulables listos para hacerlos servir.
  • Capturar los posibles fallos en la petición.

Lo bueno que tiene fetch() es que funciona con promesas, un tipo de código que se ejecuta asíncronamente sin bloquear el renderizado de nuestras páginas.

Pero bueno, sea como sea con esto deberíamos ver una estructura de objetos en la consola con los datos devueltos o un error si falla la petición.