Axios: My experience with the library.

#webdev #javascript #programming #react

Hey everyone and today I'm going to talk about my experience with the library axios, that makes the life off all developers, easier.

But wait, what is 'axios'??? Well from what I know and see others say axios is a promise based HTTP library, that makes api calls, like fetch, and gives you the response data direct, without all those .then(), basically it does that. Now I'm gonna show some ways I learned to use it.

First way I learned to use it

From the start the way you fetch data is simpler and direct, like the code below:

import axios from 'axios'

function Foo() {
  useEffect(() => {
    async function handleAPI() {
      const response = await axios.get('URL-YOU-WANT-TO-GET-DATA')
// From this variable you can store it on some state 
// and you're good to go
    }
  })

This is some way you can use it, but there is some better ways to do it

Second approach, and the way I use

After using this library some times I started to see others use it and from what I could see, and the way it better fits me, is creating a folder and using it's create method, like below:

import axios from 'axios'

const api = axios.create({
// This baseURL is the domain URL from the api
  baseURL: 'THE-DOMAIN-URL-FROM-THE-API',
})

export default api

And that's it you can import the file api from where you need, and just pass like this:

async function handleApiCall() {
  const response = await api.get('Here you can pass the route you want')
  setSomeStateHere(response.data)
}

And from here I say goodbye to you all

I'm gonna leave the link below for the docs of the axios and you can feel free to see my github, you can see some projects that use axios!
Github Profile
Axios Docs

Top comments (7)

Jakub T. Jankiewicz • Oct 9 '21 • Edited

You're missing the point, axios is almost the same as fetch API and it don't remove those .then() methods. You're using async/await syntax and this is what removes .then(). This have nothing to do with the library. I also think that the library is obsolete after browsers added fetch function. You're adding whole library that do exactly the same what native API do.

Gabriel Bittencourt • Oct 9 '21 • Edited

Hi thanks for the comment and I my haven't explained well, but what I mean't is that you don't have to code the .then()

Jakub T. Jankiewicz • Oct 10 '21 • Edited

Axios is not using async/await. Your code do that and it's JavaScript, the same is with native fetch. async/await is syntax sugar for promises that is not part of Axios it's part of JavaScript. Axios is just using promises it don't uses async/await. So the same will be with any library that use promises.
Here is example of native fetch API:

var res = await fetch('url');
var data = await res.json();

see you also don't need to use .then(), this have nothing to do with axios.

Gabriel Bittencourt • Oct 10 '21

I see, I appreciate your explanation on the topic!

Jack • Oct 9 '21

One of the first things I do on any new codebase is remove axios. Provides next to nothing that the fetch api can now do ❤
Back when everything was a gross XmlHttpRequest instance axios was invaluable, but it might as well be deprecated now 👀