Nice article, I would just like to know about your take. Can you tell me why I would like to opt for fetch when we have more cleaner option as axios? I mean no offense, I am just curious to know why should i go with fetch which has comparatively less community support.

Backbone still has the best API imo:

loadCommentsFromServer: function() {
    comments.fetch().then(function(response) {
        // perform setState here
    });
}

It's clear what model/resource I'm fetching, no internals like the service URL showing through, and when I get a response I have the additional benefit of the Collection API ready to do things like sort/filter/group the data.

I use fetch API with a tiny wrapper >_<.

https://github.com/haoxins/fetch.io

I disagree with your Take, Have you tried sending a post request with fetch, it just does't work. By little search you can find the issues with fetch. Nice Article Anyways, Covers Most of the APIs !

Great list of ajax libraries!

But if you're talking about ReactJS specifically, then every one of your examples is, in facebook's own words, an anti-pattern. You're setting state in an asynchronous callback, which means the component could be unmounted by the time the callback is called.

@fibric gets it; calling out qwest's cancellable promises. I'd recommend everyone read this post on React's blog: facebook.github.io/react/blog/2015/12/16/ismounte…

Good post, i think you forgot Got!

Great article!

I would put my vote in for the Fetch API. What I noticed when using Axios (and it is really easy to use and gets points for that) is that it didn't ever work well with unit testing. It may be a matter of using the right version, but mocking calls through axios never resolved. Fetch solved that issue. So if you have to ever test async functions like that, Fetch gets my vote. (*disclaimer, this is just from my personal experience.)

Agree, but fetch requires Promise, what is the best Promise polyfill ?

How about no library at all and just use a native XMLHttpRequest instead? Fetch is alright, but it has quite a few shortcomings now and you need a polyfill to even use it across browsers. The specification is in flux and until they address the issues like cancellation and monitoring file upload progress.

var request = new XMLHttpRequest();
request.open('GET', '/api/content', true);

request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
        var data = JSON.parse(this.response);
    } else {
        console.error('Response received and there was an error');
    }
};

request.onerror = function() {
    console.error('Request error');
};

request.send();

I wouldn't even include jQuery...

I doesn't make much sense to load jQuery just to make Ajax calls, and it looks as if the trend is not to use jQuery anymore.

If I had to include it, for sure I wouldn't put it first in the list.

I'll add an alternative library qwest

Qwest is a simple ajax library based on promises, and that supports XmlHttpRequest2 special data like ArrayBuffer, Blob, and FormData.

qwest.get(this.props.url)
     .then(function(xhr, response) {
        // perform setState here
     });

The reason why I'm listing it here is that it supports cancellation via

const request = qwest.get( /*... */ ).then( /* won't execute */ )
request.abort();

When components unmount/unload, call abort() to avoid React spamming the console when Ajax ​Promises resolve after the component has unmounted/unloaded from the DOM.