Axios vs Fetch — Which To Use in 2019

Comparing two approaches to making HTTP calls in JavaScript

Malcolm Laing
Nov 2 · 3 min read
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.

It was downloaded from npm over 25 million times in October 2019.

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

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

Using fetch

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
// }

Using axios

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.

Using fetch

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

Using axios

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

Using fetch

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

Using axios

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

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.

Malcolm Laing

Written by

Front End Engineer in Berlin. Loves React, building component libraries, module bundling, and testing.

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade