When it comes to React development, fetch is almost the default choice for every React developer. From the example for React to Redux and even in React Native, fetch is used everywhere. Fetch is very popular because it is simple and it is available in most of modern browsers. Wherever it is not supported, you can use an polyfill. But is fetch the best way to handling HTTP request?

There are other HTTP clients like: Axios and superagent. Let’s find out why they are better than fetch.

Fetch

Let”s start with fetch first. This is a typical code that we use to send HTTP request by fetch:

I actually have used fetch a lot in my project, but I have to admit that fetch is not the best way to handle HTTP request. Let’s see why.

  • You have to call JSON.stringify to convert your body payload to a string. Fetch does not do it automatically for you.
  • When receiving response, response status different than 200 doesn’t trigger the catch statement. You have to check status by your self.
  • In order to receive response content, you have to call res.json() or res.text() which return another promise.

So if you want handle a HTTP request properly with fetch, you have to write a cumbersome code. Now let’s look at other alternative for fetch.

Superagent

The headline of superagent is:  Ajax with less suck. Superagent works on both front-end and backend. It is also made by a very well-known NodeJS developer – TJ

Here is an example usage of superagent that I copy from its homepage:

This code is straight forward and very easy to understand.

  • We send a POST request to /api/pet endpoint
  • The body content is {name: ‘Manny’, species: ‘cat’}
  • We set the header with set method
  • Finally, we handle the response in an old-style callback, error is the first params and the second parameter is the response object. If the response is an JSON, superagent will parse it for us.

Superagent also comes with a lot of plugins which you can find on there homepage. That is one of the main strengths of superagent. There are a lot of plugins for superagent. For example superagent-promise-plugin can transform superagent into a Promise.

Axios

Axios is a “Promise based HTTP client for the browser and node.js”. 

Let’s send a POST request with Axios.

This code is also easy to understand. We send a POST request to /user, data is {firstName: ‘Fred’, lastName: ‘Flintstone’}. It’s return a Promise, and we handle response via then…catch.. methods.

What if you want to change request header and provide username and password for basic authentication? Well, we can configure it in the config object.

Oppose with superagent, we configure our HTTP request by a JSON object. I think it’s far easier to memorize and understand.

Another cool stuff from axios is the HTTP interceptor which is similar to interceptor in AngularJS.

From my perspective, axious is easier to use than both superagent and fetch.

Final word

Yesterday, I made a small poll in ReactJS Facebook group.

Here is the result:

It’s no surprise that Axios is pickup by most developers while fetch comes at second place. I hope this post can help you to choose a suitable HTTP client for your project.

What is your opinion? Let me know in the comment section.