Benchmark: XHR vs fetch vs axios

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
xhr
fetch
axios

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 145 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
xhr	54405.0 Ops/sec
fetch	32219.4 Ops/sec
axios	29686.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The benchmark compares the performance of three different methods: XHR (XMLHttpRequest), fetch, and axios. The goal is to determine which method is the fastest.

**What is tested**

Three individual test cases are defined:

1. **XHR**: A traditional XMLHttpRequest object is created, opened with a GET request to a Google API endpoint, and then sent. The response text is parsed as JSON when the request completes.
2. **Fetch**: The fetch API is used to send a GET request to the same Google API endpoint. The response data is parsed as JSON using the `response.json()` method and logged to the console.
3. **Axios**: The axios library is used to send a GET request to the Google API endpoint. The response data is parsed as JSON using the `response.data` property (not `response.json()`, which is why this might seem slightly different from fetch) and logged to the console.

**Options compared**

The three options are:

* **XHR**: Traditional, low-level HTTP request object.
* **Fetch**: A modern, API-first approach to making HTTP requests.
* **Axios**: A popular library that simplifies HTTP requests with a more fluent API.

**Pros and Cons of each option**

1. **XHR**:
	* Pros: Low-level control over the request process.
	* Cons: Can be error-prone, verbose, and harder to use than modern alternatives.
2. **Fetch**:
	* Pros: Easy to use, modern, and part of the Web API.
	* Cons: May not offer as much low-level control as XHR or axios.
3. **Axios**:
	* Pros: Simplifies HTTP requests with a fluent API, offers features like caching and error handling out of the box.
	* Cons: Adds an extra dependency to your project (the axios library), can be slower than native fetch due to the overhead of calling a function.

**Library usage**

The `axios` library is used in this benchmark. Axios is a popular JavaScript library that simplifies HTTP requests by providing a more intuitive API than traditional XHR or the fetch API. It also offers additional features like caching, error handling, and debugging tools.

**Special JS feature or syntax**

There are no special JavaScript features or syntax used in this benchmark. All three options rely on standard JavaScript and DOM APIs to make the HTTP requests.

**Other alternatives**

If you're looking for alternative methods to making HTTP requests, some popular options include:

* **Fetch API**: A modern, API-first approach to making HTTP requests that is part of the Web API.
* **XMLHttpRequest**: A traditional, low-level HTTP request object (as used in this benchmark).
* **JQuery**: A popular JavaScript library that includes features for making HTTP requests (although it's not as lightweight or modern as some other options).

Keep in mind that each option has its strengths and weaknesses, and the choice of which to use will depend on your specific needs and preferences.

Related benchmarks:

XHR vs fetch vs axios (version: 0)

Comparing performance of: xhr vs fetch vs axios

Created: 4 years ago by: Guest

Jump to the latest result

xhr

fetch

axios

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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