5 Best Open-Source HTTP Request Libraries for React (2021)

Last updated on October 20, 2021 Guest Contributor Loading... Post a comment

This article walks you through a list of the best open-source HTTP request libraries for React in 2021.

Axios

Axios is a lightweight promise-based HTTP client that can help you send requests to servers with ease in React. It is extremely popular and loved by the vast majority of front-end developers. The library gains approximately 21 million weekly downloads via npm. It supports a wide range of browsers including the old folks like IE 11.

Example with Javascript:

import axios from axios;

/*...*/

const fetchData = async () => {
  try {
    const response = await axios.get("https://www.kindacode.com/");
    console.log(response);
  } catch (err){
    console.log(err);
  }
}

Example with TypeScript:

let user: User = null;
try {
  const { data } = await axios.get('/users/123');
  user = data.userDetails;
} catch (error) {
  if (axios.isAxiosError(error)) {
    handleAxiosError(error);
  } else {
    handleUnexpectedError(error);
  }
}

Super Agent

  • GitHub stars: 16k+
  • Weekly NPM download: 5m – 6m
  • License: MIT
  • Written in: Javascript, HTML, Makefile
  • Links: GitHub repo | NPM page

In order to use this library with TypeScript, you need to install @types/superagent:

npm i @types/superagent

Superagent is a progressive client-side HTTP request library that supports many high-level HTTP client features. The browser-ready, minified version of this package is only 6KB (with gzipped).

Example:

import superagent from 'superagent';

/*...*/

superagent
      .post('/api/pet')
      .send({ name: 'Manny', species: 'cat' }) // sending POST data
      .set('X-API-Key', 'foobar')
      .set('accept', 'json')
      .end(function (err, res) {
         // working with err, res here
      });

Ky

  • GitHub stars: 7k+
  • Weekly NPM download: 650k – 800k
  • License: MIT
  • Written in: TypeScript (100%)
  • Links: GitHub repo | NPM page | official website

The name of the library only contains 2 characters and its unpacked size is only 81.9 KB. Ky is a tiny and elegant HTTP client based on the browser Fetch API, with no dependencies. If your project focuses on users with modern browsers then Ky is a great choice.

The library brings us many benefits over the plain Fetch API:

  • Simpler API
  • Method shortcuts (ky.post())
  • Treats non-2xx status codes as errors (after redirects)
  • Retries failed requests
  • JSON option
  • Timeout support
  • URL prefix option
  • Instances with custom defaults
  • Hooks

Example:

import ky from 'ky';

const fetchData = async () => {
  const json = await ky('https://api.kindacode.com', {
	retry: {
		limit: 100,
		methods: ['get'],
		statusCodes: [413]
	}
  }).json();
}

Popsicle

  • GitHub stars: 250+
  • Weekly NPM download: 270k – 350k
  • License: MIT
  • Written in: TypeScript (100%)
  • Links: GitHub repo | NPM page

Popsicle is an advanced HTTP request library. It can be used in React, Vue, Angular, or server-side Node.js without any configuration. There are 2 Popsicle great plugins: Popsicle Status (reject on invalid HTTP status codes) and Popsicle Retry (retry HTTP requests on bad server responses).

Example:

import { fetch, AbortController } from "popsicle";
 
const controller = new AbortController();
 
setTimeout(() => controller.abort(), 500);
 
const res = fetch("https://www.example.com", {
  signal: controller.signal
});

stream-http

  • GitHub stars: 320+
  • NPM weekly downloads: 13m – 15m
  • License: MIT
  • Written in: Javascript
  • Links: GitHub repo | NPM page

If you want to implement features of Node’s native http module in React then stream-http is the thing you need. In accordance with its name, stream-http tries to provide data to its caller before the request has been completed whenever possible.

Some common use cases:

  • Start the request when the user focuses on an input field or a textarea, get all of the headers, then wait until the user presses submit the form before sending the data they entered.
  • Gradually send data generated on the client like video, audo.

stream-http has to make some tradeoffs to support binary data and streaming. In general, it could make a reasonable decision about which underlying browser features to use, but sometimes the module needs to get a little input from the developer.

Conclusion

We’ve gone through the list of best open-source HTTP request libraries for React. If you’d like to explore more new and interesting stuff in modern React and frontend development, take a look at the following articles:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles