en VueJS

Curso VueJS – Realizando Peticiones a un API con Vue (Clase IV)

Realizando peticiones a un API con Vue

Hola a todos, en la entrada anterior vimos como utilizar las directivas y eventos que Vue nos proporciona, y añadimos información a nuestra aplicación en el método data de nuestro componente. En esta ocasión veremos como podemos realizar peticiones a un API con Vue y de esta manera, traer esta información desde un servidor externo y visualizarla en nuestra aplicación, podríamos realizarlo utilizando Axios, fetch, o Bluebird, pero para efectos de este curso lo haremos utilizando un plugin de Vue llamado Vue-resource.

Instalando Vue-resource

Para llevar a cabo esto, basta con ejecutar el siguiente comando


# Yarn

yarn add vue-resource

# npm

npm i vue-resource -S

Ahora debemos configurarlo, esto lo haremos en nuestro archivo main.js.

  • Primero tenemos que importar el plugin:

import Vue from 'vue'

import VueResource from 'vue-resource'

import App from './App.vue'

...

  • Una vez importado, debemos “registrarlo” dentro de Vue para poder utilizarlo en nuestra aplicación.
... 
Vue.use(VueResource)

new Vue({
...

Realizando Peticiones

Habiendo realizado lo anterior, ya podemos realizar peticiones a cualquier API. Para el caso de este curso lo haremos a la PokeAPI. Para esto vamos a modificar el bloque <script> de nuestro componente App.vue para quedar de la siguiente manera:

export default {
    name: 'app',
    data() {
      return {
        pokemons: []
      }
    },
    methods: {
      toggleCaptched(pokemon) {
        pokemon.captched = !pokemon.captched
      }
    },
    mounted() {
      this.$http.get('http://pokeapi.co/api/v2/pokemon/')
        .then(response => {
          if(response.status === 200) {
            this.pokemons = response.data.results.map(pokemon => {
              return {
                name: pokemon.name,
                captched: false
              }
            })
          }
        })
        .catch(error => {
          console.console(error)
        })
    }
  }

Aquí que lo único que hicimos fue modificar el método data para que nuestro vector de pokemons esté vacío. Y añadimos el método mounted, este método que pertenece a los métodos que hacen referencia al cilo de via de una aplicación Vue, se activa cuando el render ha terminado, es decir, cuando la aplicación ha sido “montada”.

Dentro de este método, utilizamos el objeto $http que nos provee el plugin que instalamos anteriormente (vue-resource), recuerda que con “this” estamos haciendo referencia a la instancia Vue de nuestro componente, por lo tanto podemos utilizar el plugin sin problemas, y de este objeto estamos utilizando el método get, al cual le estamos pasando la URL desde donde queremos recibir los datos como parámetro.

Este método utiliza promesas para realizar la petición, por ende utilizamos .then/.catch para manejar el estado de la respuesta que nos provea el servidor. Dentro del método .then recibimos un argumento, en este caso lo he llamado response y antes que cualquier cosa, verificamos que el código de respuesta del servidor sea 200 (Correcto).

De ser verdadero, modificamos nuestro vector de pokemons, pasandole todos los pokemons que vienen en la respuesta del servidor (PokeAPI segmenta la respuesta a 20, ya veremos como trabajar esto más adelante). Utilizamos el método “map” para recorrer el vector de pokemons que nos devuelve el servidor, para aplicar una función a cada elemento y poder devolver justo lo que queremos, en nuestro caso, por ahora sólo necesitamos el nombre del pokémon y un atributo “captched” cuyo valor inicial es false.

Como vemos dentro de “map” estamos utilizando return para devolver un objeto con los parámetros que necesitamos (name y captched). Si no te queda claro, la función map sirve para iterar através de los elementos de un vector, y aplicar una función, cuyo resultado de la función map, es un nuevo vector conteniendo los datos que necesitamos, por ejemplo, podríamos devolver el nombre de los pokemons de forma invertida.

Y ahora, si ejecutamos la aplicación podremos verificar que todo está correcto. Podemos visualizar una lista de pokemons como lo hacíamos anteriormente, pero ahora utilizando datos traídos desde un API.

Resultado - Realizando Peticiones a un API con Vue

Esto ha sido todo por hoy. En la próxima entrada vamos a trabajar con más componentes para nuestra aplicación y mejorar un poco nuestro código. Espero sus opiniones acerca del curso hasta ahora, y si les ha sido util para aprender les agradezco lo compartan.

Saludos.

Deja un comentario

    • Hola Miguel, gracias por pasar al blog.
      Claro que la hay, lo había aplazado por peticiones de otros temas, pero en esta semana estaré subiendo las entradas restantes, si gustas revisar el proyecto terminado, puedes encontrarlo en GitHub. Saludos y espero continues visitando el blog, y que lo compartas.