Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
XHR vs fetch vs axios vs superagent
(version: 0)
Benchmark.js
Comparing performance of:
xhr vs fetch vs axios vs superagent
Created:
2 years ago
by:
Registered User
Go to the latest result
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>
Run tests (4)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=512127" width="100%" height="500px"></iframe>
xhr
13K/s
superagent
12K/s
fetch
12K/s
axios
8K/s
View exact numbers
Test name
Executions per second
✓
xhr
13,150 Ops/sec
superagent
12,042 Ops/sec
fetch
11,558 Ops/sec
axios
8,378 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
XHR vs fetch vs axios to tronscan
XHR vs fetch vs axios (no log)
Comments
Confirm delete:
Do you really want to delete benchmark?