Benchmark: XHR vs fetch vs axios ghondar

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://apilist.tronscan.org/api/account?address=TWaSm8dnvTdJQ9hcpW3g8m4QEfJspcuDwA'); xhr.onload = () => console.log(JSON.parse(xhr.responseText)); xhr.send();
fetch
fetch('https://apilist.tronscan.org/api/account?address=TWaSm8dnvTdJQ9hcpW3g8m4QEfJspcuDwA') .then(response => response.json()) .then(console.log)
axios
axios.get('https://apilist.tronscan.org/api/account?address=TWaSm8dnvTdJQ9hcpW3g8m4QEfJspcuDwA') .then((response) => console.log(response.data))

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript benchmark test created on MeasureThat.net. The test compares the performance of three different libraries: XMLHttpRequest (XHR), fetch, and Axios, when making an HTTP GET request to retrieve data from a specific API endpoint.

**Tested Options**

1. **XMLHttpRequest (XHR)**: A built-in JavaScript API for making HTTP requests.
2. **Fetch**: A modern JavaScript API introduced in ECMAScript 2015 for making HTTP requests.
3. **Axios**: A popular third-party library for making HTTP requests, providing a simpler and more intuitive API than XHR.

**Pros and Cons of each approach**

1. **XMLHttpRequest (XHR)**:
	* Pros: Built-in, no additional dependencies required.
	* Cons: Less convenient to use than fetch or Axios, requires manual handling of request headers, query parameters, and error handling.
2. **Fetch**:
	* Pros: Modern, intuitive API with clear benefits for asynchronous programming.
	* Cons: Requires JavaScript version 13 or higher to work natively, may have slower performance compared to native XHR implementation.
3. **Axios**:
	* Pros: Simplifies HTTP request handling and provides a more modern, consistent API across web frameworks.
	* Cons: Additional dependency required, can introduce overhead due to its higher-level abstraction.

**Library-specific considerations**

1. Axios is designed for making HTTP requests with JSON data, so the test case uses `axios.get()` method to retrieve the data from the API endpoint. Axios also provides built-in support for promises, which simplifies error handling and asynchronous programming.
2. The fetch API is generally more concise than XHR and Axios in this specific use case.

**Special JS feature or syntax**

The test uses ES6+ features such as arrow functions (e.g., `xhr.onload = () => console.log(JSON.parse(xhr.responseText));`) and template literals (e.g., `'https://apilist.tronscan.org/api/account?address=TWaSm8dnvTdJQ9hcpW3g8m4QEfJspcuDwA'`) to make the test cases more concise and readable.

**Other alternatives**

If you want to use alternative libraries for making HTTP requests, some other options include:

* **jQuery.ajax()**: A widely used library that provides a simple way to handle HTTP requests.
* **XMLHttpRequest with jQuery.extend(true, window, {ajax: function})**: An older approach that uses XHR and jQuery's `extend` method to create a custom AJAX library.
* **Native Web Workers or WebAssembly for parallel processing**: More advanced approaches that can be used for performance-critical tasks.

In summary, this benchmark test provides a straightforward comparison of the performance of three libraries: XMLHttpRequest (XHR), fetch, and Axios. It highlights the pros and cons of each approach and demonstrates how different libraries can simplify HTTP request handling in JavaScript applications.

Related benchmarks:

XHR vs fetch vs axios ghondar (version: 0)

Comparing performance of: xhr vs fetch vs axios

Created: 4 years ago by: Registered User

Jump to the latest result

xhr

fetch

axios

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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