DEV Community

loading...
Cover image for 4 Maneras de llamar a una API Rest con JavaScript

4 Maneras de llamar a una API Rest con JavaScript

vikingcodeblog profile image VikingCodeBlog ・7 min read

¿Qué es una API Rest?

Antes de ver 4 Maneras de llamar a una API Rest con JavaScript, es posible que no conozcas que es esto de las API Rest, así que para ello, te comparto una definición que da BBVAAPIMarket, en esencia, una API Rest, es una interfaz que nos permite comunicarnos con otra aplicación que espera que hagamos una petición, puede ser para obtener datos, añadir datos, borrar…

Un Ejemplo

PokéApi es una API de prueba con temática nintendera, nos proporciona varias rutas como esta «https://pokeapi.co/api/v2/pokemon/ditto» la cual nos proporciona los datos del pokemon Ditto.
Manera de llamar a una API Rest con JavaScript PokéApi
Puedes probar esta ruta simplemente desde tu navegador. Con ella obtenemos un JSON con todos los datos del pokemon.
Primera manera de llamar a una API Rest con JavaScript Navegador

4 Maneras de llamar a una API Rest con JavaScript

Ahora sí, vamos a ver 4 Maneras de llamar a una API Rest con JavaScript, todas ellas son válidas, iré opinando sobre ellas mientras te las muestro.

1. XMLHttpRequest (AJAX)

La primera forma de obtener datos que vamos a ver, va a ser mediante XMLHttpRequest, un objeto de JavaScript que fue diseñado por Microsoft y adoptado por Mozilla, Apple y Google.

Es un estándar de la W3C. Seguro que has oído hablar de la programación AJAX (Asynchronous JavaScript And XML), Esto era una forma de programar usando un conjunto de tecnologías que te permitían crear páginas más dinámicas, al hacer peticiones al backend para obtener datos nuevos sin tener que recargar la página al completo.

AJAX suena increíble ya que hoy en día todas las páginas webs hacen peticiones al backend sin necesidad de recargar la página actual pero estamos hablando de un término creado en 2005.

// Creamos un nuevo XMLHttpRequest
var xhttp = new XMLHttpRequest();

// Esta es la función que se ejecutará al finalizar la llamada
xhttp.onreadystatechange = function() {
  // Si nada da error
  if (this.readyState == 4 && this.status == 200) {
    // La respuesta, aunque sea JSON, viene en formato texto, por lo que tendremos que hace run parse
    console.log(JSON.parse(this.responseText));
  }
};

// Endpoint de la API y método que se va a usar para llamar
xhttp.open("GET", "https://pokeapi.co/api/v2/pokemon", true);
xhttp.setRequestHeader("Content-type", "application/json");
// Si quisieramos mandar parámetros a nuestra API, podríamos hacerlo desde el método send()
xhttp.send(null);
Enter fullscreen mode Exit fullscreen mode

De esta manera obtenemos el siguiente resultado:

JSON resultante al llamar a la API Rest

2. Fetch

Fetch es una nueva implementación de JavaScript, nos permite hacer lo mismo que XMLHttpRequest pero de manera más sencilla, el único defecto que le puedo ver es que al ser tan nueva, no funciona en internet Explorer, pero bueno, esto es un problema soportable para casi cualquier proyecto moderno.

fetch('https://pokeapi.co/api/v2/pokemon')
      .then(response => response.json())
      .then(json => console.log(json));
Enter fullscreen mode Exit fullscreen mode

Con solo estas líneas estaríamos obteniendo el mismo resultado que en el código anterior con XMLHttpRequest, no es necesario importar ni instanciar fetch, simplemente se le llama😮.

3. Axios

Hasta ahora, tanto XMLHttpRequest como Fetch eran nativas de JavaScript, pero Axios es una librería externa que tendremos que importar en nuestro proyecto antes de usarla.

<head>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode

Una vez importada, podrás usarla en tu proyecto.

axios.get('https://pokeapi.co/api/v2/pokemon')
  .then(function (response) {
    // función que se ejecutará al recibir una respuesta
    console.log(response);
  })
  .catch(function (error) {
    // función para capturar el error
    console.log(error);
  })
  .then(function () {
    // función que siempre se ejecuta
  });
Enter fullscreen mode Exit fullscreen mode

¿Por qué se usa tanto Axios? Parece que Fetch es perfecto ¿para que iba a querer importar otra librería a mi proyecto?

El primer motivo es sencillo, Fetch es nuevo y no puede implementarse en proyectos que sigan usando tecnologías viejas, algunas veces está limitado, mientras que Axios tiene muy buena compatibilidad.

Pero hay más motivos, por ejemplo, Axios te permite añadir un timeout a la llamada para que se cierre cuando lleva un rato intentando obtener datos sin éxito.

Otro motivo muy importante es que Axios parsea automáticamente las respuestas JSON.

// axios
axios.get('https://pokeapi.co/api/v2/pokemon')
  .then(response => {
    console.log(response.data); // response.data ya es un JSON
  }, error => {
    console.log(error);
  });

// fetch()
fetch('https://pokeapi.co/api/v2/pokemon')
  .then(response => response.json())    // a fetch le llega una respuesta en string que tiene que ser parseada a JSON
  .then(data => {
    console.log(data) 
  })
  .catch(error => console.error(error));
Enter fullscreen mode Exit fullscreen mode

Axios tiene más funcionalidades como los interceptores, que te permiten interceptar las llamadas y reaccionar a ellas, esto se usa por ejemplo cuando nuestro backend tiene un sistema de seguridad que necesita que las llamadas lleven un token, podemos meterle el token a la llamada desde un interceptor para no tener que picarlo en código cada vez que lo vayamos a usar.

axios.interceptors.request.use(config => {
  // Aquí podríamos hacer algo con la llamada antes de enviarla
  console.log('Se ha enviado algo');
  return config;
});

// llamada común
axios.get('https://pokeapi.co/api/v2/pokemon')
  .then(response => {
    console.log(response.data);
  });
Enter fullscreen mode Exit fullscreen mode

Creo que me he detenido demasiado tiempo en Axios, pero me interesaba hacer un pequeño análisis de por que es la librería que más he visto en los proyectos por los que he pasado.

4. jQuery.Ajax()

Obviamente si queremos hacer este tipo de llamadas, tendremos que importar la librería de jQuery a nuestro proyecto.

jQuery es una librería que muchos dan por muerta, pero creo que todavía le queda mucho recorrido, no hay más que ver las encuestas de StackOverflow o StateOfJs, sigue siendo una de las librerías/frameworks más usados, por lo que creo que es necesario conocer esta manera de llamar a una API Rest con jquery.

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode
$.ajax({
  type: 'GET',
  url: 'https://pokeapi.co/api/v2/pokemon',
  dataType: 'json',
  success: function(data) {
    console.log(data)
  }
});
Enter fullscreen mode Exit fullscreen mode

Realmente es un método bastante sencillo de utilizar.

Poniendo la teoría en práctica

Vamos a hacer uso de la API de PokéApi para obtener datos y pintar nuestra propia Pokedex.

<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="head">
      <h1>Pokedex</h1>
    </div>
    <div id="container"></div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body{
    background-color: #ececec;
    font-family: 'Ubuntu', sans-serif;
  }

  .head{
    background-color: rgb(187, 70, 49);
    padding: 20px;
    position: fixed;
    top: 0;
    width: 100%;
    color: white;
  }

  #container{
    width: min(100%, 1000px);
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .card{
    width: 230px;
    margin-top: 100px;
    background-color: white;
    padding: 20px;
    border-radius: 20px;
  }

  .card img {
    width: 100%;
  }

  .card span{
    color: #6e6e6e;
    font-weight: 500;
  }
Enter fullscreen mode Exit fullscreen mode
// Obtenemos los datos de todos los pokemon 
fetch('https://pokeapi.co/api/v2/pokemon')
        .then(response => response.json())
        .then(json => {
            printPokemons(json.results);
        });

// Pinta todos los pokemos insertando un HTML dentro del #container
function printPokemons(pokemons) {
  const container = document.getElementById('container')
  pokemons.forEach(pokemon => {
    container.innerHTML = `
    ${container.innerHTML}
    <div class="card">
    <img src="https://pokeres.bastionbot.org/images/pokemon/${getPokemonId(pokemon.url)}.png"/>
    <span>Nº.${getPokemonId(pokemon.url)}</span>
    <h2>${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}</h2>
    </card>
  `;
  });
}

// En esta ruta de la API no nos viene el id de cada pokemon, pero si que nos viene
// una URL, para poder obtener todos los datos de ese pokemon, la cual contiene su ID
// así que le extraigo el ID a la URL
function getPokemonId(url) {
  return url.replace('https://pokeapi.co/api/v2/pokemon/', '').replace('/','')
}
Enter fullscreen mode Exit fullscreen mode

El resultado es el siguiente.
Resultado pokedex

Más maneras de llamar a una API Rest desde JavaScript.

Me parece interesante destacar otras maneras de llamar a una API Rest usando JavaScript.

HttpClient

En el caso del framework de desarrollo Angular, se nos proporciona una librería para hacer llamadas a este tipo de servicios.

La librería HttpClient de Angular es muy potente, interceptores, testing, integrada con TypeScript… La verdad que dudo de que alguien use otra librería en proyectos de Angular.

SuperAgent

SuperAgent es una librería muy ligera, bastante similar a Axios.

Request

No conozco mucho Request, pero he visto muchas librerías de empresas que se basan en ella para implementar alguna funcionalidad propia, no se si será por algo en especial o simplemente es casualidad.

Conclusiones

Uso fetch siempre que voy a desarrollar un ejemplo para el blog, pero realmente si quisiera crear un proyecto entero con JavaScript, Axios sería mi primera opción ya que tiene varias funcionalidades muy sencillas y potentes.

jQuery.Ajax, no creo que la use ya que no trabajo en proyectos que contengan esa librería, pero nunca se sabe.

Y XMLHttpRequest, ahora que Microsoft ha matado internet Explorer, creo que ya no será necesario y pondré a fetch por delante.

Discussion (1)

pic
Editor guide
Collapse
maxdevjs profile image
maxdevjs

wow.. por suerte empecé a estudiar español 😃 Me encantó este tutorial

pokeapi.co/api/v2/pokemon/ditto» (pokeapi.co/api/v2/pokemon/ditto%C2%BB) is a broken link, should be pokeapi.co/api/v2/pokemon/ditto