DEV Community

Gabriel Bittencourt
Gabriel Bittencourt

Posted on

Axios: My experience with the library.

image
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
    }
  })
Enter fullscreen mode Exit fullscreen mode

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

image

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
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

And from here I say goodbye to you all
image
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

Discussion (7)

Collapse
jcubic profile image
Jakub T. Jankiewicz • Edited on

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.

Collapse
gabrlcj profile image
Gabriel Bittencourt Author • Edited on

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

Collapse
jcubic profile image
Jakub T. Jankiewicz • Edited on

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();
Enter fullscreen mode Exit fullscreen mode

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

Thread Thread
gabrlcj profile image
Gabriel Bittencourt Author

I see, I appreciate your explanation on the topic!

Collapse
jackmellis profile image
Jack

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 👀

Collapse
gabrlcj profile image
Gabriel Bittencourt Author

Thanks for the comment, I agree that fetch and async/await can do all these things, I just explained my thoughts and experience with the library 😆

Collapse
gramsco profile image
Antonin

Interceptors are amazing in axios, come on