Do you use Axios or Fetch?

github logo ・1 min read

As a lover of programming, I send a lot of time exploring why we follow certain conventions. More recently, I've been playing around with hosting an API on Heroku.

Most of the tutorials used Axios, with no thought to the decision. Several hours later, it's still not clear if
1) the industry is moving towards using Axios
2) there are certain scenarios where Axios is the best tool
3) it's something else altogether

Would love to hear your thoughts on the two

ThisYoutube video offers an interesting POV, but he ultimately defaults to Fetch

twitter logo DISCUSS (11)
markdown guide
 

There's one thing i find annoying when working with axios (the only module im using right now).
So i have a stack wich consists of a react web app + Node.js/Express REST api. Whenever i send a json response from my api and i need to read it in my front-end application i have to access it this way:

// response from api
// { success: true, data : [1,2,3,4,5,6,7] }

axios({...})
  .then((res) => {
     if ( res.success && res.data ) {
       //the data is in res.data.data
     }
  })

This thing happens because axios wraps all the response from the server inside response['data']. So if you're going to use the normal rest convention on your api responses you will need to access it like response['data']['data'] or like response.data.data .

 

I just came into 2 things that should interest you (and me as well!) :

transformResponse

This is a configuration option in axios that can let us fix this behavior by returning the plain server response:

axios.get("/users", {
  transformResponse: [
    function(data) {
      return data.data;
    }
  ]
});

I find it a bit ugly to have an array of functions...

Interceptors response

Might be a more elegant way to fix it. Plus, you do not have to add it in your configuration for every request, it is done once and for all.

axios.interceptors.response.use(function (response) {
  return response.data;
});

I will try it and if it works, I might start using it again in my projects :)

 

Thanks for your advice. That's a nice way of doing it.
I already use interceptors for listening for the 401 response status.

Although i said that's something annoying the verbosity of axios is at the same time where axios shines. We can take as an advantage the verbosity of the response and use it to enrich our logs

I've been reading about Axios interceptors and it seems like a cool way to address not only HTTP errors but async problems that can pop up

 

I had this discussion recently as I've started to use fetch instead of Axios. The general responses were about browser support as Axios is compiled with Babel and will, therefore, work on more browsers then fetch will.

Also, Axios can give you progress updates on post requests and apparently has better security (I'm personally not sure on that one).

 

Yup. If you need to support IE or really old Android/iOS Axios is a good answer, though there are polyfills just for fetch if you want to go that way.

 

I personnaly use fetch because of 2 reasons:

  1. I did not understood why by default data were returned in a data key
  2. I did not find its value over the regular fetch

Now, for 4kb more in our client bundle, this makes a pretty good tool to add in our toolbelt...

 

If I know I am going to use Cypress, I choose Axios, since spying/asserting on fetch calls is not supported yet, else I usually choose fetch!

 

A mixture of both, Axios because they're already being used in several of the existing projects I'm working on. I recently started work on a brand new spanking project and for that fetch was chosen because it's supported by all our target browsers. One less dependency is always better!

 

I use either fetch or node's native http module. The fewer dependencies the better.

 

I've used Axios in cases by default, forgetting to use fetch. The fewer dependencies the better in my mind, however!

Classic DEV Post from Jun 11

Are CSS and HTML programming languages?

Are HTML and CSS programming languages?

Jasterix profile image

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❤️