Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
XHR vs fetch - jsonplaceholder
(version: 0)
benchmark XHR vs fetch
Comparing performance of:
xhr vs fetch
Created:
2 years ago
by:
Registered User
Jump to the latest result
Tests:
xhr
const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://jsonplaceholder.typicode.com/users'); xhr.onload = () => console.log(JSON.parse(xhr.responseText)); xhr.send();
fetch
fetch('https://jsonplaceholder.typicode.com/users').then(response => response.json()).then(console.log)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
xhr
fetch
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):
Measuring the performance of two different approaches to make HTTP requests in JavaScript: XHR (XMLHttpRequest) and fetch. **Overview** The benchmark is comparing the execution speed of these two methods for making a GET request to a JSONPlaceholder API endpoint. The test case uses the `fetch` API, which is a modern alternative to XHR. **Options Compared** 1. **XHR**: A traditional JavaScript object that allows you to make HTTP requests. 2. **Fetch**: A modern JavaScript API introduced in ECMAScript 2015 (ES6), designed for making HTTP requests. **Pros and Cons of Each Approach** ### XHR Pros: * Wide support across browsers, including older versions * Can be used for more complex requests (e.g., POST, PUT, DELETE) Cons: * Can be verbose and error-prone due to the need to manage request state manually * Less intuitive and less readable compared to fetch ### Fetch Pros: * More modern, concise, and readable syntax * Automatic handling of many common HTTP request errors (e.g., network errors) * Reduced need for manual request state management Cons: * Requires support in older browsers; some may not have native fetch implementation **Library Used** In this benchmark, the `fetch` API is used directly. No external libraries are required. **Special JS Feature or Syntax** The use of the `fetch` API introduces a modern JavaScript feature: **async/await syntax**. This allows for more readable and concise code, especially when handling promise-based APIs like fetch. The benchmark code uses async/await to define the request logic: ```javascript fetch('https://jsonplaceholder.typicode.com/users') .then(response => response.json()) .then(console.log); ``` This syntax is relatively new and might require explanation for developers without recent experience with modern JavaScript. **Other Alternatives** For making HTTP requests in JavaScript, besides XHR and fetch: * **Axios**: A popular third-party library for making HTTP requests (e.g., GET, POST, PUT, DELETE). It provides a more flexible and feature-rich API than fetch, but also adds an external dependency. * **jqXHR**: A wrapper around the native XHR object, aiming to improve its usability. However, it is less commonly used today due to the popularity of fetch. In summary, the benchmark compares two approaches for making HTTP requests in JavaScript: traditional XHR and modern fetch. The test highlights the advantages of fetch's concise syntax and automatic error handling while acknowledging potential limitations related to browser support.
Related benchmarks:
xhr vs fetch send
xhr vs fetch perf
XHR vs fetch without JSON parsing
XHR (responseType: json) vs fetch
Comments
Confirm delete:
Do you really want to delete benchmark?