Axios replacing fetch in Vue 3 app with CodeIgniter 4 - 10

We are going to learn about the library that I told you about at the beginning two or three previous classes ago, which was Axios, which would be the replacement for fetch, as I was telling you, you can search here for Axios versus Fetch:

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

Expressive syntax

And get more information but for me it has two clear advantages, one is that it will be a syntax a little more expressive but that helps, that is to say, simpler, more minimalist and easier to understand:

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

Axios support in all browsers

The following support that although the fetch must be supported by several browsers, the majority, I dare say, support the fetch, but, using a library like axios we can be completely sure that this support will always be present.

Setting axios with Vue

Setting up axios with Vue

$ npm install axios

And at the Vue main file level, we load axios as a global Vue property:

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')

With this, we are ready to use axios with Vue.