Benchmark: XHR vs fetch vs axios vs superagent

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/superagent"></script>

Tests:

xhr
const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/discovery/v1/apis'); xhr.onload = () => console.log(JSON.parse(xhr.responseText)); xhr.send();
fetch
fetch('https://www.googleapis.com/discovery/v1/apis') .then(response => response.json()) .then(console.log)
axios
axios.get('https://www.googleapis.com/discovery/v1/apis') .then((response) => response.json()) .then(console.log);
superagent
superagent.get('https://www.googleapis.com/discovery/v1/apis') .then(res => { console.log(res.body); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
xhr
fetch
axios
superagent

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
xhr	13149.5 Ops/sec
fetch	11557.9 Ops/sec
axios	8378.0 Ops/sec
superagent	12041.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Overview**

The provided benchmark tests four different methods for making HTTP requests to retrieve data from an API endpoint: XMLHttpRequest (XHR), fetch, axios, and superagent. The goal is to compare their performance in terms of execution speed and number of executions per second.

**Options Compared**

1. **XMLHttpRequest (XHR)**: A built-in JavaScript API for making HTTP requests.
2. **fetch**: A modern JavaScript API introduced in 2015 for making HTTP requests.
3. **axios**: A popular third-party library for making HTTP requests, known for its simplicity and ease of use.
4. **superagent**: Another popular third-party library for making HTTP requests, designed to be simple and easy to use.

**Pros and Cons**

1. **XMLHttpRequest (XHR)**:
	* Pros: Native JavaScript API, no additional dependencies required.
	* Cons: Outdated syntax, less efficient than modern alternatives.
2. **fetch**:
	* Pros: Modern JavaScript API, widely adopted and well-supported.
	* Cons: Requires a modern browser with support for HTTP/2.
3. **axios**:
	* Pros: Simple and easy to use, popular among developers.
	* Cons: Adds an additional dependency (library) to the project.
4. **superagent**:
	* Pros: Similar to axios in terms of simplicity and ease of use.
	* Cons: Also adds an additional dependency (library) to the project.

**Library Descriptions**

1. **axios**: A promise-based HTTP client for JavaScript. It allows you to send HTTP requests, including GET, POST, PUT, DELETE, and more. Axios also supports JSON data encoding and decoding, request headers, query parameters, and more.
2. **superagent**: A simpler and more lightweight alternative to axios. It uses the native XMLHttpRequest API under the hood but provides a higher-level interface for making HTTP requests.

**Special JS Features or Syntax**

None mentioned in this benchmark.

**Alternative Approaches**

1. **Native Node.js APIs**: If you're building a server-side application, you could use native Node.js APIs like http or https to make HTTP requests.
2. **Other libraries**: There are other popular libraries for making HTTP requests in JavaScript, such as jQuery-Ajax, requestAnimationFrame-based approaches, and more.

**Benchmark Preparation Code**

The provided HTML code includes the necessary scripts for axios and superagent to be executed:
```html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/superagent"></script>
```
This ensures that both libraries are loaded and available for use in the benchmark test cases.

Related benchmarks:

XHR vs fetch vs axios vs superagent (version: 0)

Comparing performance of: xhr vs fetch vs axios vs superagent

Created: 2 years ago by: Registered User

Jump to the latest result

xhr

fetch

axios

superagent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):