Usando Axios para consumir APIs

En muchas ocasiones, al construir una aplicación web, se quiere consumir y mostrar datos de un API. Existen diversas formas de hacerlo, pero un enfoque muy popular es utilizar axios, un cliente HTTP basado en promesas.

Aclaración uso axios

Hay varias manera de hacer el consumo de la API, desde el uso de fetch(), que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red, a usar JQuery. El uso de axios reside en aprovechar la potencia que nos da el poder trabajar con las dependencias de node. El uso de uno u otro recaerá en las especificaciones o decisiones tomadas en el proyecto.

Configuración

Axios viene instalado por defecto al instalar Laravel, con lo que ya se puede ver la integración que tiene con nuestro framework. Ahora nos toca exponer axios para que se pueda utilizar, para ello debemos incorporar axios al proyecto y generar una propiedad global para que se pueda utilizar en nuestra app, para ello hay que modificar nuestro fichero main.js:

import { createApp } from "vue";

// Estilos personalizados de la aplicación (si los tienes)
import '../../css/vue.css'

import axios from "axios";
import App from "./App.vue"

const app = createApp(App)

// Configuración global de Axios para poder usarlo en los componentes
app.config.globalProperties.$axios = axios
window.axios = axios

app.mount("#app")

Consumo de API

Ahora ya estás en posición de consumir la API generada en la UT anterior con axios. A continuación, veremos el ejemplo de un listado de post que nos devolverá nuestra API. Procedemos a generar el fichero que contendrá los componentes.

resources\js\vue\components\ListComponent.vue

<template>

    <h1>Post List</h1>

    <div class="mb-5"></div>

    <o-table :data="posts.data">
        <o-table-column field="id" label="ID" v-slot="p">
            {{ p.row.id }}
        </o-table-column>
        <o-table-column field="title" label="Title" v-slot="p">
            {{ p.row.title }}
        </o-table-column>
        <o-table-column field="posted" label="Posted" v-slot="p">
            {{ p.row.posted }}
        </o-table-column>
        <o-table-column field="category_id" label="Category" v-slot="p">
            {{ p.row.category.title }}
        </o-table-column>

    </o-table>

</template>
<script>
export default {

    data() {
        return {
            posts: [],
            isLoading: true,
        }
    },
    mounted() {
        this.listPage()
    },
    methods: {
        listPage() {
            this.isLoading = true
            this.$axios.get('/api/post/').then((res) => {
                this.posts = res.data
                this.isLoading = false
            })
        },
    }
}
</script>

Como se aprecia en la función $axios.get() le facilitamos la ruta de la API que debe consumir. En el siguiente apartado veremos cómo podemos mejorar esta consulta cuando veamos la manera en la que se manejan las rutas, o rutean, en nuestro proyecto reactivo.

Paginación de los resultados de API

En muchos casos nuestra API nos devolverá más datos de los que queremos mostrar, en estos casos la paginación es vital. Siguiendo con la filosofía que hemos estado desarrollando, para realizar la paginación de nuestro proyecto deberemos modificar el fichero del listado para hacer uso del componente de paginación.

resources\js\vue\components\ListComponent.vue

<template>

    <h1>Post List</h1>

    <div class="mb-5"></div>

    <o-table :data="posts.data" :loading="isLoading">
        <o-table-column field="id" label="ID" v-slot="p">
            {{ p.row.id }}
        </o-table-column>
        <o-table-column field="title" label="Title" v-slot="p">
            {{ p.row.title }}
        </o-table-column>
        <o-table-column field="posted" label="Posted" v-slot="p">
            {{ p.row.posted }}
        </o-table-column>
        <o-table-column field="category_id" label="Category" v-slot="p">
            {{ p.row.category.title }}
        </o-table-column>

    </o-table>
    <div class="mb-5"></div>

    <o-pagination v-if="posts.data && posts.data.length > 0" @change="updatePage" :total="posts.total"
        v-model:current="currentPage" :range-before="2" :range-after="2" size="small" :simple="false" 
        :rounded="true" :per-page="posts.per_page">
    </o-pagination>
</template>
<script>
export default {

    data() {
        return {
            posts: [],
            isLoading: true,
            currentPage: 1,
        }
    },
    mounted() {
        this.listPage()
    },
    methods: {
        updatePage() {
            setTimeout(() => {
                this.listPage()
            }, 100);
        },
        listPage() {
            this.isLoading = true
            this.$axios.get('/api/post/'+'?page=' + this.currentPage).then((res) => {
                this.posts = res.data
                this.isLoading = false
            })
        },
    }
}
</script>

Bug

Debido hay que hay un retraso con la carga de datos del componente, se pone un tiempo de espera a la hora de cargar la página. Esto deberá de comprobarse, ya que de no darse el retraso, no es una buena práctica y debería eliminarse.

Actividad

• PR 905. (RA9 / CE9b CE9c CE9d CE9e CE9h / IC2 / 5p) - Genera la API que te permita llevar a cabo tu aplicación de las notas. Ten en cuenta que una correcta arquitectura te facilitará el trabajo. Genera una factoría que permita cargar datos de prueba.