¿Cómo llamar a una API REST desde JavaScript?

Published in

williambastidasblog

3 min readMar 25, 2020

Una API no es más que, por una parte la definición de las funciones que puede realizar un software y por otra parte la metodología que podemos utilizar para comunicarnos con él (junto con la información que le debemos transmitir).

Existen dos alternativas populares para consumir o comunicarnos una API REST desde javascript; Fetch API y la Biblioteca Axios. En este artículo vamos a profundizar sobre la primera.

Fetch API

La API Fetch proporciona una interfaz para obtener recursos (incluso a través de la red). Parecerá familiar a quien sea que haya usado XMLHttpRequest, pero proporciona un conjunto de características más potentes y flexibles.

En pocas palabras la Fetch API es una alternativa moderna que nos permite interactuar con APIs y obtener los datos a nuestra aplicación, de una forma parecida a lo hacíamos con AJAX pero de una manera mucho más sencilla.

Utilizar el API Fetch es muy sencillo:

Las interfaces genéricas de Headers, Request, and Response proporcionan coherencia, mientras que las promesas permiten un encadenamiento más fácil y async/await sin callbacks.
El único parámetro requerido de fetch() es una url. El método por defecto en este caso es GET.

Fetch(‘url‘)

3. El Segundo parámetro es opcional, en sí recibe parámetros extras acerca del tipo de petición que vamos hacer, si queremos enviar datos, bajo qué tipo va a estar encodeado, si vamos a enviar algún tipo de headers (dependiendo de cómo este configurado el servidor) …

Fetch(‘url ‘, {
    method: (‘GET/POST/PUT/DELETE ‘,        //optional
    headers: {                              //optional
        Content-Type ‘: application/json ‘  //optional
        ...
    },
    body: formData                          //optional
})

¿Cómo hacer un GET utilizando la API Fetch? (Traer Datos)

El método GET se usa para recuperar datos del servidor. Este es un método de solo lectura, por lo que no tiene riesgo de mutar o corromper los datos.

fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(json => console.log(json))

¿Cómo hacer un POST utilizando la API Fetch? (Enviar Datos)

El método POST envía datos al servidor y crea un nuevo recurso.

fetch('https://jsonplaceholder.typicode.com/todos', {
            method: 'POST',
            body: JSON.stringify({
                name: "Taylor",
                surname: "Swift"
            }),
            headers: {
                "Content-type": "application/json"
            })
      .then(response => response.json())
      .then(json => console.log(json))

¿Cómo hacer un PUT utilizando la API Fetch? (Actualizar Datos)

El método PUT se usa con mayor frecuencia para actualizar un recurso existente.

fetch('https://jsonplaceholder.typicode.com/todos', {
            method: 'PUT',
            body: JSON.stringify({
                id: 1,             
                name: "Taylor",
                surname: "Swift"
            }),
            headers: {
                "Content-type": "application/json"
            })
      .then(response => response.json())
      .then(json => console.log(json))

¿Cómo hacer un DELETE utilizando la API Fetch? (Borrar Datos)

El método DELETE se usa para eliminar un recurso.

fetch('https://jsonplaceholder.typicode.com/users/id', {
    method: ‘DELETE’
});

¿Cómo capturo los datos de un fetch? ¿Promises? ¿Asyn Await?

Promises

El método Fetch devuelve una promesa, lo que quiere decir que podemos utilizar el método .then cuando la promesa sea resuelta de manera correcta vamos a recibir una función con la respuesta de la petición.

En el siguiente ejemplo simulamos una request que nos devuelve un json: Parceamos la respuesta utilizando el método response.json() que también devuelve una promesa la cual podemos encadenar para finalmente obtener los nuestros datos.

Fetch(‘https://jsonplaceholder.typicode.com/users‘)
.then(response => response.json())
.then(json => console.log(json))

En la respuesta tenemos métodos que nos permiten interactuar con diferentes tipos de datos:

arrayBuffer()
blob()
json()
text()
formData()

Async/Await

Existe una alternativa al uso de promesas dentro de la método fetch y al encadenamiento del .then() que puede llevar a que tengamos muchas devoluciones de llamada anidadas, las cuales reducen rápidamente la legibilidad y pueden conducir fácilmente a un mal rendimiento o errores.

El uso de Async / Await no es totalmente compatible con todos los navegadores, por lo que debe ser consciente de esto y verificar sus necesidades al desarrollarlo. Aquí hay un recurso para verificar el soporte y la funcionalidad del navegador , y aquí para usarfetch .

Para llamar a una función usando la palabra clave await, la misma debe estar dentro de una función async como en el ejemplo a continuación.

async function getUser(name) 
{
  let response = await      fetch(`https://api.github.com/users/${name}`);
  let data = await response.json()
  return data;
}

Finalmente tenemos una alternativa para llamar a una API REST desde JavaScrip, se trata de una librería llamada Axios, la cual ha venido ganando bastante popularidad, les dejo el enlace oficial y un artículo interesante para los que deseen conocer más sobre el tema.