Promesas Con La API De Star Wars - Muy Sencillo!

Hola, cómo están?

Hoy les comparte cómo utilizo la API de Star Wars(https://swapi.co/api/) utilizando promesas.

Empecemos!

PASO 1:

Lo primero que debemos hacer es crear una función que haga la llamada a la API de Star Wars. A esta función la vamos a llamar getData y lo que hará es hacer es un XMLHttpRequest(WTF!? Si no entiendes fijate bien lo que hace en el código), también devolverá una promesa, si la promesa se resolvió exitosamente (es decir, nos llegó la data de la API) nos va a devolver esa info en un futuro (then).

functiongetData(url){
  
  returnnew Promise((resolve, reject) => {
    var req = new XMLHttpRequest();
    req.open('GET', url);
    
    req.onload = function() {
      if (req.status == 200) {
        resolve(req.response);
      }
      else {
        reject(Error(req.statusText));
      }
    }
 
    req.onerror = function() {
      reject(Error("Network Error"));
    }

    req.send()
   
  })
}

Paso 2:

Ahora es cuando empezamos a manipular la data que nos llegó. Para ello llamamos a la función **getData **y le pasamos como argumento la URL (https://swapi.co/api/people/1/). Esta última devuelve los datos de Luke Skywalker. Esto lo pueden ir modificando a medida que vayan explorando la API. Link a la API https://swapi.co/

var data;

getData('https://swapi.co/api/people/1')
  .then((respuesta) => {
    data = JSON.parse(respuesta)
  })
  .then(() => {
    console.log(data.name);
  })

Primero inicializo una variable justo arriba del llamado a getData. La voy a utilizar a futuro para guardar un JSON.

En el primer then recibo el valor de resolve de la promesa, lo llamo “respuesta”. Después le asigno a data (variable inicializada anteriormente) el valor de “respuesta” pasado a JSON(utilizo el método JSON.parse()).

En el segundo then muestro en consola el valor de “name” del objeto JSON guardado en la variable data.

Para que se den una idea dentro de la variable data está esta info https://swapi.co/api/people/1/

Pueden observar en vez de llamar a data.name en el console.log también pueden pasarle data.hair_color y esto les devolverá el color de pelo de dicho personaje.

Esto es un uso muy simple de la API utilizando promesas. Espero que les a modo de una introducción muy light al mundo de las promesas.

Aquí pueden ver el DEMO ONLINE y abrir la consola para ver el código.

Saludos!

Leandro Videla