Axios vs Fetch — Which To Use in 2019

Comparing two approaches to making HTTP calls in JavaScript

Malcolm Laing
Nov 2, 2019 · 3 min read
Image for post
Image for post
Photo by Kelly Sikkema on Unsplash

Axios is a celebrated JavaScript module. It’s a promise-based HTTP client for browsers and NodeJS. If you have worked as a JavaScript during the last few years, you have used it.

But what if I told you that it’s a dead project? One thread on Reddit suggests just that.

  • There is very little activity on Github
  • Github issues and Pull Requests are left ignored
  • There is no communication from the core team

A widely discussed security vulnerability made matters even worse. Snyk had reported the vulnerability in 2017. It was ignored by the project for over two years.

When axios became popular, there was no native promise-based HTTP client for the browser. The native XML HTTP Request (XHR) interface was clunky and hard to work with. Developers flocked to axios because it made our lives easier.

In 2015, fetch was released. So why are we still using axios in 2019?

Less boilerplate

fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))
// {
// "userId": 1,
// "id": 1,
// "title": "delectus aut autem",
// "completed": false
// }
axios.get("https://jsonplaceholder.typicode.com/todos/1")
.then(response => console.log("response", response.data))
// {
// "userId": 1,
// "id": 1,
// "title": "delectus aut autem",
// "completed": false
// }

With fetch, we need to deal with two promises. With axios, we can directly access the JSON result inside of the response object data property.

The json() method of the Body mixin takes a Response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON.

The additional boilerplate is more apparent when working with POST requests.

fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
body: JSON.stringify({
title: "Title of post",
body: "Post Body"
})
})
.then(res => {
if (!response.ok) throw Error(response.statusText);
return response.json();
})
.then(data => console.log(data))
.catch(error => console.log(error));
axios
.post("https://jsonplaceholder.typicode.com/posts", {
title: "Title of post",
body: "Body of post"
})
.then(response => console.log(response.data))
.catch(error => console.log(error));

With axios you can avoid boilerplate and write cleaner, more concise code.

Error handling

fetch("https://jsonplaceholder.typicode.com/todos/100000")
.then(response => {
if (!response.ok) throw Error(response.statusText);
return response.json();
})
.then(data => console.log("data", data))
.catch(error => {
console.log("error", error);
});
// error Error: Not Found
axios
.get("https://jsonplaceholder.typicode.com/todos/100000")
.then(response => {
console.log("response", response);
})
.catch(error => {
console.log("error", error);
});
// error Error: Not Found

Axios throws network errors, while fetch does not. When working with fetch, you must always check the response.ok property. To make it easier and more reusable, you could extract this error checking into a function.

const checkForError = response => {
if (!response.ok) throw Error(response.statusText);
return response.json();
};
fetch("https://jsonplaceholder.typicode.com/todos/100000")
.then(checkForError)
.then(data => console.log("data", data))
.catch(error => {
console.log("error", error);
});

Missing features

Axios can monitor the progress of your uploads. This is not possible with fetch. If you are building an application with video or photo upload, this could be a dealbreaker.

const config = {
onUploadProgress: event => console.log(event.loaded)
};
axios.put("/api", data, config);

Alternative libraries

  • ky — a tiny & elegant HTTP client based on window.fetch
  • superagent — Small progressive client-side HTTP request library based on XMLHttpRequest

So what should you use in 2019?

It depends. If you need to keep track of upload progress, then axios or superagent is your best bet. If you can handle the limitations of fetch, then you’re best off sticking with fetch. To remove some of the boilerplate, try a wrapper library like ky.

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

By Frontend Digest

The latest and greatest in frontend development Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Malcolm Laing

Written by

JavaScript Consultant. Senior React developer. Still makes silly mistakes daily.

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Malcolm Laing

Written by

JavaScript Consultant. Senior React developer. Still makes silly mistakes daily.

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store