Peticiones Axios desde Vuejs
Las plataformas web generalmente no almacenan la información en el mismo lugar donde se almacena el frontend. Esto se hace por seguridad y por cuestiones de arquitectura, ya que cuando un proyecto es segmentado en varias partes se vuelve más fácil de mantener y escalar. Es por este motivo, que el frontend para obtener la información que mostrará al usuario tiene que realizar peticiones API al backend.
En este tutorial aprenderemos a utilizar Axios, la herramienta por excelencia para realizar peticiones http desde el frontend hacia un API.
Índice
- Creando un API fake para pruebas
- Nuestra primera petición con Axios
- Creando un servicio para nuestra petición
- Usando
async-await - Tu turno
1. Creando un API fake para pruebas
Antes de hacer nuestras peticiones con Axios, lo que necesitamos es un API para probar las peticiones que haremos. Crear un API desde cero nos puede tomar un tutorial completo o más, por lo que ahora utilizaremos una herramienta que nos ayudará a crear un API fake de forma fácil y rápida. Esta herramienta es json-server y usaremos el siguiente comando para instalarlo.
npm install -g json-server
Para poder utilizar esta herramienta primero necesitamos nuestros datos fake. Esto lo debemos crear en un archivo .json de la siguiente forma.
{
"frameworks": [
{
"id": 1,
"name": "React"
},
{
"id": 2,
"name": "Vuejs"
},
{
"id": 3,
"name": "Angular"
}
]
}
Nosotros utilizaremos el nombre de bd.json dentro de la carpeta src/data_base para almacenar este archivo y probar nuestro API. Para correr nuestra herramienta y obtener un endpoint con los datos que tenemos utilizaremos el siguiente comando.
json-server --watch src/data_base/db.json
Esto nos levantará un servidor local con un puerto especifico al que podremos hacer peticiones GET con Axios para obtener la información de nuestro archivo json.
2. Nuestra primera petición con Axios
Axios es una herramienta para realizar peticiones GET, POST, DELETE y otros que nos permitirán traer, enviar, eliminar y actualizar información desde un API. Para instalarlo solo necesitamos utilizar el siguiente comando.
# Usando npm
npm i axios
# Usando yarn
yarn add axios
La forma más simple de usar Axios es desde el método created() del componente que necesita los datos que se traerán. De esta forma nos aseguramos que los datos estén listo para cuando nuestro componente se renderice en pantalla.
</script>
import axios from "axios";
export default {
data() {
return {
frameworks: [],
};
},
created() {
axios
.get("http://localhost:3000/frameworks")
.then((response) => {
this.frameworks = response.data;
console.log(this.frameworks);
})
.catch((error) => {
console.log("There was an error: " + error);
});
},
};
</script>
En el ejemplo anterior, utilizamos Axios para realizar una petición GET a nuestro API fake montado con json-server. Las peticiones Axios son promesas por lo que tienen un then y un catch, esto lo vimos en otro tutorial sobre JavaScript. El primero utiliza un callback para, mediante un response entregar la información que se trajo del API. El catch, por otra parte, llama a un callback que devuelve un mensaje de error en caso de que la petición falle.
3. Creando un servicio para nuestra petición
El ejemplo anterior no es la mejor forma de hacer una petición GET, ya que, muchas veces una página hace varias peticiones a un API, por no decir cientos o miles, si se trata de una plataforma web grande. En este caso llenar el created() de peticiones no es la forma más ordenada de proceder.
En estos caso, lo que se debe hacer es separar las peticiones en servicios, es decir métodos a los cuales llamaremos para realizar peticiones a nuestro API. Para esto crearemos el archivo FrameworkService.js el cual colocaremos dentro de la carpeta src/services. Y dentro del archivo ordenaremos nuestro código de la siguiente forma.
// Importamos axios
import axios from "axios";
// Creamos la base de las peticiones, con los datos necesarios
const apiClient = axios.create({
baseURL: "http://localhost:3000",
withCredentials: false,
headers: {
Accept: "applicacion/json",
"Content-Type": "application/json",
},
});
// Exportamos los métodos para las peticiones
export default {
getEvents() {
return apiClient.get("/frameworks");
},
};
Y en el archivo de nuestro componente simplemente llamamos al servicio y de igual forma como hicimos anteriormente usando los callbacks almacenamos la información y mostramos el error.
<template>
<div>
<div v-for="nn in events" :key="nn.id">
<h3>{{ nn.title }}</h3>
</div>
</div>
</template>
<script>
import EventService from "@/services/EventService.js";
export default {
data() {
return {
frameworks: [],
};
},
created() {
EventService.getEvents()
.then((response) => {
this.frameworks = response.data;
console.log(this.frameworks);
})
.catch((error) => {
console.log("There was an error: " + error);
});
},
};
</script>
En caso tengamos que agregar más llamas al API con diferentes parámetros o hacer una petición POST. Simplemente aumentamos el código dentro de nuestro archivo de servicios.
export default {
getEvents() {
return apiClient.get("/events");
},
getEvent(id) {
return apiClient.get("/events" + id);
},
};
4. Usando async-await
Una de las principales características que nos dejaron las últimas versiones de JavaScript es el async-await para recibir promesas sin perder el hilo de nuestro código. Es decir, cuando lo usemos nuestra función se quedará esperando la petición hasta que este llegue y continúe ejecutando las siguientes líneas de código.
methods: {
async getFrameworks () {
try {
await frameworksService
// Aqui podríamos colocar más promesas, que se ejecutarán uan después de otra
} catch (e) {
console.log(e)
}
}
}
5. Tu turno
Cómo puedes ver no es difícil hacer peticiones Axios para trabajar con un API. Ahora es tu turno de practicar lo aprendido utilizando APIs de uso libre que existen en internet, como https://rickandmortyapi.com/ o https://pokeapi.co/.