Introduction to Axios: Replacing fetch

▶

Let's learn about the library I mentioned two or three classes ago: Axios, which works as a replacement for fetch.

As I mentioned, you can search for comparisons like "Axios vs. Fetch" to learn more. However, in my opinion, Axios has two clear advantages:

1. More expressive syntax: Although it's a minimal difference, it's simpler, more minimalist, and easier to understand and follow.
2. Better support: Although fetch is supported by most browsers, it's important to check. You can search "fetch support" on Google and you'll see a table, usually from Mozilla, that clearly shows which versions it's available in. In general, support is quite broad, except for very old versions, so this shouldn't be a problem.

Installing Axios in a Vue project

Let's install Axios, since we can easily do so in our project.

To do this, use the following command:

npm install axios

This is common when working with the Node ecosystem. Remember, we're using Vue, and npm is Node's package manager.

When we install Node, we get two tools:

node: the JavaScript engine.

npm: Node Package Manager, the package manager.

You can also use npm and axios, which is the shorthand version. This will install Axios in your Vue project. I recommend doing this with the server shut down just in case, although it shouldn't usually cause any problems if it's up.

An advantage of using Node and npm instead of a CDN is that we don't need to download the JS file, manually copy it to the project, configure it, or link it in multiple places. It's much cleaner and more professional.

Axios Global Settings

Once installed, it must be configured globally to be used throughout the application. This configuration will be done in the Vue startup file, i.e., main.js.

In that file, as we've seen, the Vue instance is created and the parent component (App.vue) is defined, where all other components are loaded.

Importing the package

First, we import Axios. I like to separate third-party package imports, so we'll do it like this:

import axios from 'axios';

Note that this is a default import, so we don't use curly braces {}.

Creating the Vue instance

Next, we split the application creation and assembly operation into two steps:

const app = createApp(App);
app.mount('#app');

This allows us to make additional configurations before building the app.

In some cases, the editor may throw a warning if we import something we haven't used yet. If this is the case, you can temporarily comment out the line for testing purposes.

Axios Global Allocation

Now we set Axios as a global property. This is done like this:

app.config.globalProperties.$axios = axios;

The $ prefix is ​​optional, but in Vue, it's used by convention to indicate that it's a special or internal property of the framework. This helps avoid conflicts with other variables, for example, if you later define something called axios within a component.

However, if you don't like the $, you can omit it, although it's recommended to follow the convention.

Verifying the configuration

To make sure everything is working, we can run a test in the browser console. First, remember that Axios is now available throughout the application via this.$axios inside components.

If you want to access Axios from the global console, you can assign it to the window object like this:

window.axios = axios;

With this, you can access it directly in the browser console:

console.log(window.axios);

If you don't assign it to the window object, the browser won't recognize it and will display undefined.