Cómo consumir una API en Javascript

Consumir los datos de una API REST en Javascript es una tarea muy común y sencilla gracias a la API Fetch.

Fetch viene a sustituir al antiguo XMLHttpRequest y provee de una interfaz orientadas a promesas, mucho más sencilla de implementar que los callbacks de XMLHttpRequest.

La implementación de una petición GET sería la siguiente:

fetch("https://example.com/posts.json")
.them(response => response.json())
.them(data => console.log(data))

Como puedes observar, fetch devuelve una primera promesa en la que ejecutamos el método json() que a su vez devuelve otra promesa con los datos como un objeto JSON parseado.

En la respuesta de la petición, fetch nos ofrece los siguientes métodos para según el tipo de datos que estemos tratando:

blob() Cuando la respuesta del servidor es un Objeto binario grande (Binary Large OBject)

arraybuffer() Cuando el servidor devuelve un buffer genérico de datos

json() Cuando el servidor nos devuelve datos en formato JSON (lo más habitual)

text() Cuando el servidor nos devuelve un texto plano

formData() Cuando queremos parsear los datos recibidos como un objeto FormData

Además de éstos, la respuesta también provee de una propiedad ok que nos permite saber si la respuesta del servidor se ha ejecutado correctamente

fetch("https://example.com/posts.json")
.them(response => {
    if (response.ok) console.log("Respuesta correcta del servidor")
})

Como fecth devuelve promesas, podemos usarlo en conjunto con async/await para tener una estructura bastante más concisa.

const response = await fetch("https://example.com/posts.json")
const data = await response.json()
console.log(data)

Y ¿enviar datos con fetch?

Por defecto, fetch realiza una petición GET, aunque podemos realizar peticiones con cualquier otro método HTTP (GET, POST, PATCH, PUT, DELETE ...), además de otras opciones como cabeceras, cuerpo de la petición, etc.

Para hacerlo le pasaremos un segundo parámetro con las opciones de la petición.

const response = await fetch(url, {
    method: 'POST', // GET, POST, PUT, DELETE, etc.
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data) 
})