Bienvenidos a la segunda parte de tres de la serie Introducción a Vue.js. En la publicación anterior hablé sobre porqué escogí Vue.js sobre Angular y React, la instalación y conceptos básicos de Vue.js para poder comenzar a utilizarlo lo más rápido posible. En esta publicación estaré hablando sobre cómo hacer llamadas y consumir APIs para crear aplicaciones poderosas.

Si no has tenido la oportunidad de leer la primera publicación de esta serie, Introducción a Vue.js, te recomiendo leerla antes de continuar ya que vamos a estar usando conceptos ya explicados.


¡​ENVÍO GRATIS!


​ADQUIERE TU ​FIDGET PAD HOY

​Libera el estrés del trabajo con el Fidget Pad. Te ayudará ​a bajar el estrés y a que te puedas concentrar nuevamente. No querrás soltarlo.

Bien, ¡empezemos!

APIs

Para el beneficio de todo aquel que esté comenzando en el mundo de la programación, APIs (Application Programming Interface) son interfaces que permiten la comunicación entre 2 o más aplicaciones. Si te interesa conocer más sobre los APIs puede entrar aquí.

Ok, Vue.js por sí solo no puede hacer llamadas http de ningún tipo. Así para poder consumir los APIs o hacer cualquier llamada http vamos a necesitar una librería adicional. Hay varias, pero nosotros estaremos utilizando Axios. La escogimos porque se integra perfectamente con Vue.js y es sumamente flexible y fácil de utilizar.

Lo primero que tenemos que hacer es añadir la referencia de Axios a nuestra aplicación de Vue.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Añadiendo esa línea de código tenemos la capacidad de hacer llamadas utilizando cualquier tipo de verbo como GET, POST, DELETE y PUT a cualquier recurso externo.

Probablemente ya lo sabes, pero si no, esta es la función de cada verbo:

  • GET: se utiliza para obtener información del recurso que estamos usando. Cada vez que accedemos a alguna página web, estamos realizando una llamada de tipo GET.
  • POST: se utiliza para escribir o guardar información. Por ejemplo, cuando un usuario nuevo se registra en una página web, se realiza una llamada de tipo POST.
  • DELETE: se utiliza para eliminar información previamente almacenada.
  • PUT: se utiliza para actualizar la información de algún récord.

Ahora bien, supongamos que estamos desarrollando una red social y necesitamos buscar los últimos mensajes que la gente ha escrito. Supongamos también que ya el API de esta red social existe y nos dicen que podemos conseguir la información que necesitamos a través del siguiente enlace: https://jsonplaceholder.typicode.com/posts (esto es API de ejemplo que ofrece un listado de objetos JSON para propósitos de prueba).

Nota: Estamos asumiendo que el API que se va a utilizar ya está funcional. El código para manejar estas llamadas desde el servidor (back-end) es totalmente distinto y no se cubre en esta publicación.

Como ya mencionamos, para obtener la información vamos a utilizar Axios. Y la llamada sería de la siguiente manera:

axios
   .get('https://jsonplaceholder.typicode.com/posts')
   .then(response => {
       // Código para manipular la respuesta de la llamada
       // utilizando el objeto response.data
   })
   .catch(error => {
      // para el manejo de errores
      console.log(error);
   });

Vamos a ver en detalle que estamos haciendo en este pedazo de código. En esencia, estamos utilizando el método get del objeto axios. Este método va a realizar una llamada de tipo GET al recurso que le enviemos como parámetro. Esto nos va a devolver un objeto que lo podemos capturar en el método then, bajo la variable llamada response.

Como menciona el comentario, en la variable response.data se encuentra el listado de mensajes que la gente ha escrito. Así que, naturalmente, si desplegamos esa variable en la consola, debemos ver la información. Para esto podemos escribir la siguiente línea dentro de la función en el .then.

.then(response => {
    // Código para manipular la respuesta de la llamada
    // utilizando el objeto response.data
    console.log(reponse.data);
})

la consola debe aparece algo similar a esto:

Una vez tengamos esta información, podemos hacer un sin número de cosas con ella. Podemos mostrar el listado al usuario o abrir una pantalla nueva con la información. Podemos almacenarla para mostrarla cuando el usuario presione un botón específico. Las posibilidades son infinitas, todo depende de tu imaginación y los requerimientos de la aplicación.

¡Perfecto! Ya podemos extraer data. Pero ¿qué pasa cuando queremos enviar información a través del API? El proceso es bastante similar.

Este es un ejemplo de llamada de tipo POST para escribir la información de un usuario:

let axiosOptions = {
    method: 'POST',              // verbo de la llamada que vamos a realizar
    url: '/users/register',      // la ruta, dentro del API, que vamos a utilizar
    data: {                      // Data que queremos guardar
      id:       17,
      nombre:   'Juan',
      apellido: 'Del Pueblo',
      tipo:     'Usuario'
    }
    json: true                   // indicando que estamos enviando la 
                                 // información en formato JSON
};

axios(axiosOptions)
.then( response => { 
    // nuevamente, la respuesta del servidor se  
    // encuentra en la variable response
})
.catch(error => {
    console.log(error);
});

En este caso la estructura cambió levemente. Ahora tenemos un objeto JSON (axiosOptions) con las especificaciones de nuestra llamada. Pero la diferencia mayor es que ahora estamos utilizando el verbo POST. Este mismo código se puede utilizar para hacer llamadas de otros verbos. Solo hay que cambiar el valor de la variable method dentro del objeto axiosOptions.

De esta manera es que podemos consumir diferentes APIs, haciendo que nuestra aplicación de Vue.js sea una mucho más interactiva. Espero haberte dado una idea de cómo comenzar a integrar tu aplicación de Vue.js con algún API.

Cuéntame, ¿has tenido experiencia con Axios anteriormente o has usado otras librerías? Déjame saber en los comentarios.