Proyecto conversor de divisas usando una API con JavaScript

Simplificando fetch()

Antes de continuar vamos a hacer un inciso para transformar la petición fetch a funciones flecha para simplicar el código, ya que generalmente se deja todo más simple.

Primero borremos las funciones:

scripts.js

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

Ahora, algo muy interesante que se puede hacer con las funciones flecha es devolver un resultado directo sin necesidad de abrir un bloque, fijaros:

fetch(url)
.then(response => 
  response.json()
)

Como lo que se devuelve es una sola instrucción implícita, podemos incluso no devolver nada y mostrar algo directamente por pantalla:

.then(data => 
  console.log(data)
)
.catch(error => 
  console.error(error)
)

Este código tan simple que hemos conseguido suele escribirse en tres líneas substituyendo la variable response por una r:

let url = 'https://api.exchangeratesapi.io/latest?symbols=USD,GBP,JPY';
fetch(url)
  .then(r => r.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

Esta es la forma más simplificada posible de fetch(), pero tened en cuenta que en el momento que necesitemos más de una instrucción en las funciones flecha tendremos que crear un bloque con llaves obligatoriamente.