Axios en reemplazo de los fetch en la app de Vue 3 con CodeIgniter 4 - 10

Vamos a instalar y configurar axios en un proyecto en Vue.

Vamos a conocer la librería que te comentaba al inicio hace dos tres clases anteriores que era la de axios que sería el reemplazo de lo fetch como te comentaba puedes buscar aquí axios versus fetch:

https://axios-http.com/docs/intro

Sintaxis expresiva

 Y obtener más información pero para mí tiene dos ventajas claras que es una que va a ser una sintaxis un poco más expresiva un poco pero eso ayuda es decir más simple más minimalista y más sencilla de entender:

axios.get('http://code4movies.test/api/pelicula')
    .then(res => this.movies = res.data)
    .catch(error => console.log(error))

Axios soporte en todos los navegadores 

La siguientes soporte que aunque el fetch debe soportarlo varios navegadores la mayoría me atrebo decir soportan el fetch, pero, empleando una librería como axios podemos estar completamente seguros de que este soporte siempre va a estar presente.

Configurar axios con Vue

Vamos a instalar axios como paquete para realizar peticiones HTTP a la Rest Api en CodeIgniter; lo instalamos con:

$ npm install axios

Y a nivel del archivo principal de Vue, cargamos a axios como una propiedad global de Vue:

src/main.js

import './assets/main.css'

import { createApp } from 'vue'
import axios from 'axios'

import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$axios = axios
window.axios = axios

app.mount('#app')

Con esto, ya estamos listos para emplear axios con Vue.

22-02-2025 - Andrés Cruz

In english

• Categoría
• /
• CodeIgniter
• /
• Axios en reemplazo de los fetch en la app de Vue 3 con CodeIgniter 4 - 10