What is the best library for making AJAX calls?

comparing and contrasting axios, request, and fetch

Caroline Okun
Jul 28, 2017 · 3 min read

I’ve been searching around for the answer to this question for a while so I decided to put some real research into it and this is what I’ve found. If you’re looking for a quick one word answer, I would recommend axios. That said, there’s definitely an argument for each of these options and hopefully this article will help you pick your personal favorite.

Fetch

Below is the syntax for a common fetch call. Note that when making a fetch call, we first get back a response object containing type, useFinalURL, url, status, ok, statusText, and headers. To get the actual data we have to call response.text() or response.json() depending on the format of the data we’re receiving.

fetch(url)
.then(response => response.json())
.then(data => console.log(data));

Fetch, the newest ajax library, is a standardized API implemented with the intention of replacing XMLHttpRequests and unifying fetching across the web. While fetch is a very nice API to use because of its simple syntax, it lacks some of the staple characteristics of more developed libraries such as canceling requests. Fetch also doesn’t haven’t have built-in mechanisms to override defaults so credentials, mode, and headers will all have to be specified with each request. While this is may not be an issue in smaller applications, its definitely something to consider when building a larger scale project where your calls take similar specifications. However, in my opinion, the largest drawback to fetch is the way it handles errors. Fetch rejects the promise only in case of network error so when server returns 404, we actually receive “success” as the response. To more effectively check for errors we would have to write something like:

fetch(url)
.then(response => {
return response.json().then(data => {
if (response.ok) {
return data;
} else {
return Promise.reject({status: response.status, data});
}
});
})
.then(result => console.log(‘success:’, result))
.catch(error => console.log(‘error:’, error));

Nevertheless, fetch is an overall popular choice because of its accessiblity and readability, especially in projects with less demanding/frequent API calls. The library uses concise syntax, is promise based, and is supported in React Native apps, unlike axios and request.

Axios

Axios setup requires a quick npm install axios and you’re ready to go. Axios is a promise based library that is supported in all browsers, while fetch is only supported in Chrome and Firefox. Like fetch and request it uses concise syntax with easy to read documentation. A basic axios get request would look like:

axios.get(‘/’)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

Unlike fetch, the catch block will be triggered on all errors and the data is stored on the response object at response.data. Although axios is not supported in React Native, I have found it to be a great option in many other use cases such as web and desktop apps.

Request

Like axios, to set up request, run npm install request. Request is structured a bit differently than axios and fetch. The library is not promise based (however request-promise is an easy to use wrapper that returns promises), and instead it emits a “response” event when a response is received. Similarly, to listen for errors, simply replace “response” with “error”. An example request call would be:

request
.get(‘http://google.com/img.png')
.on(‘response’, function(response) {
console.log(response)
})

Request can also pipe to itself. For example:

request.get(‘http://google.com/img.png')
.pipe(request.put('http://mysite.com/img.png'))

The .pipe() function preserves content-length and content-type in the PUT headers and chains on another request call.

So which should I use?

In the end, there is no real right or wrong answer to the posed question. These three libraries, are for the most part, slightly different configurations of the same functionality. I personally find axios to be the most readable and easiest to use, but all would be suitable for your classic web app.

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