DEV Community

loading...
Cover image for Do you prefer Fetch or Axios?

Do you prefer Fetch or Axios?

madza profile image Madza ใƒป1 min read

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

The Fetch API is built-in most modern browsers and provides a fetch() method defined on the window object, while Axios is a specific 3rd party Javascript library you must install manually.

Which method do you usually use and do you think adding a library (around 4.4KB gzip) is worth it for the extra features it brings?

Discussion

pic
Editor guide
Collapse
yoursunny profile image
Junxiao Shi

jQuery.ajax()
๐Ÿคฆ

Collapse
microworlds profile image
Caleb David

That legendary function ๐Ÿ˜‚

Collapse
kudostoy0u profile image
Kudos Beluga

$.get()
$.post()

Collapse
yoursunny profile image
Junxiao Shi

$.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.

Collapse
madza profile image
Madza Author

been there, done that ๐Ÿ˜‚๐Ÿ˜‚

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

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

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.

Collapse
adamazad profile image
Adam Azad

What about?

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

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

Now data is an array of objects Fruit

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

Actually, it's just a fake typing.

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

Collapse
ryands17 profile image
Ryan Dsouza

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.

Collapse
janpauldahlke profile image
Collapse
saisandeepvaddi profile image
Sai Sandeep Vaddi

Axios.

API things like,

  1. No need to serialize body explicitly by the developer.
  2. Automatic wrapping in data object which I guess good security practice as well.
  3. Reusable instances with axios.create.
  4. 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.

Collapse
microworlds profile image
Caleb David

I use both, but mostly just stick with fetch and node-fetch ๐Ÿ˜Ž

Collapse
rohit86799 profile image
Rohit

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.

Collapse
soorajsnblaze333 profile image
Sooraj

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.

Collapse
codefinity profile image
Manav Misra

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.

Collapse
kalashin1 profile image
Kinanee Samson

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.

Collapse
madza profile image
Madza Author

Fair enough ๐Ÿ˜‰

Collapse
angelmtztrc profile image
Angel Martinez

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.

Collapse
hhsm95 profile image
Hugo Sandoval

Axios has more browsers compatibility.

Collapse
filosganga profile image
Collapse
trasherdk profile image
TrasherDK

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

Collapse
raguay profile image
Richard Guay

Iโ€™ve moved from Axios to Fetch. Axios is easier to use, but Fetch doesnโ€™t add anything extra. Therefore, Iโ€™m mostly using Fetch now.

Collapse
sasha_fishter profile image
Sasha

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.

Collapse
madza profile image
Madza Author

Same here ๐Ÿ˜‰

Collapse
pontakornth profile image
pontakornth

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

Collapse
aghost7 profile image
Jonathan Boudreau

For backend: superagent
For frontend: fetch

Collapse
pavelloz profile image
Paweล‚ Kowalski

fetch + node-fetch.
Because fetch is native, and node-fetch has the same syntax, so i can copy paste code from front to back.

Collapse
bombillazo profile image
Hector Ayala

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