DEV Community

Do you prefer Fetch or Axios?

Madza on November 27, 2020

One of the fundamental tasks of any web application is to communicate with servers through the HTTP protocol. This can be easily achieved using Fet...

Read full post

Pacharapol Withayasakpunt • Nov 27 '20 • Edited

axios integrates better with TypeScript interfaces, however, fetch (and well as node-fetch) has much more predictable output.

// Is it `string` or `Record<string, unknown>` (or `Blob`)?
const { data } = await axios.get('/api')

// Nearly always `Record<string, unknown>`
const data2 = await fetch('/api').then((r) => r.json())

Also, fetch can be attached AbortController. I would be interested in a library built on top fetch.

I know there are superagent and ky, but I never really tried.

Adam Azad • Nov 27 '20

What about?

interface Fruit {
  id: string;
  name: string;
}

const { data } = await axios.get<Fruit[]>('/fruits');

Now data is an array of objects Fruit

Pacharapol Withayasakpunt • Nov 27 '20

Actually, it's just a fake typing.

It depends on the "real" data, whether it gets JSON.parse() or not.

Junxiao Shi • Nov 27 '20

jQuery.ajax()
🤦

Caleb David • Nov 27 '20

That legendary function 😂

Kudos Beluga • Nov 27 '20 • Edited

$.get()
$.post()

Junxiao Shi • Nov 27 '20 • Edited

$.getJSON()
$.getScript()

Don't forget $(selector).load(uri).

All of these are better than my first AJAX program: I didn't know JavaScript has closures, so that every XMLHttpRequest object is a global variable.
It's 2006, when everyone was using IE6, I just read a book about AJAX, I haven't heard about Prototype.js, and jQuery existed for less than a year.

Madza • Nov 27 '20

been there, done that 😂😂

Ryan Dsouza • Nov 27 '20

I prefer axios's API and also fetch doesn't throw an error when we get a non 200 response from the backend except for Network errors. Which is why I use redaxios, the best of both worlds.

jan paul • Nov 27 '20

Caleb David • Nov 27 '20

I use both, but mostly just stick with fetch and node-fetch 😎

Rohit • Nov 27 '20

My opinion is to use axios, because in some cases like if we have to show the progress of our request then it will be very difficult to handle this using fetch method but axios have a good managed function for that case.

Also axios provides good documentation for the function and there use.

Sai Sandeep Vaddi • Dec 22 '20 • Edited

Axios.

API things like,

No need to serialize body explicitly by the developer.
Automatic wrapping in data object which I guess good security practice as well.
Reusable instances with axios.create.
Interceptors API is amazing and it really helps if you want to customize request or responses.

More things.

Also, works really well with TypeScript which other user has mentioned.

Sooraj (PS) • Nov 27 '20

If the application needs to be light and have only a few http calls, then I would generally go for either fetch or xmlHTTPRequest.
For applications that are dependent on a lot of HTTP calls, then I think axios is the best approach and its easy to get away with setup.

Kinanee Samson • Dec 6 '20

Most old browser will not understand fetch API and that is where, axios shines. Axios accommodates fetch API. However i think fetch API makes code look neater and a Lil bit synchronous. If I want compatibility, I'll pick axios else its fetch.

Madza • Dec 7 '20

Fair enough 😉

Manav Misra • Nov 27 '20

fetch is fine. I don't mind the 'double await' Usually, I move 'api' functionality to its own module/file anyway, so I am not typing it more than once.

Angel Martinez • Nov 27 '20

I use Fetch when the project is small or when I know it will not grow much. I prefer to use Axios in projects where requests carry more information since Axios allows you to configure an instance of it.

Hugo Sandoval • Nov 27 '20

Axios has more browsers compatibility.

TrasherDK • Nov 27 '20

Fetch can't handle 401 response, with no access to headers. Digest authentication is a problem.

Filippo De Luca • Nov 27 '20

Axios

Pontakorn Paesaeng • Jan 4 '21

I prefer fetch API as I expect user to have slightly modern browser. I don't want to support outdated browser.

Hector Ayala • Nov 27 '20 • Edited

I haven't tried fetch yet, but axios is a delight to use, and I already know what to expect with it.

Sasha • Nov 27 '20

I would go with axios. It has nice API, and I never felt good with fetch. Dunno why, but axios feels so much more natural to my mind. It's really easy to use.