Benchmark: axios vs fetch - MeasureThat.net

HTML Preparation code:

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

Tests:

axios
const url = "https://jsonplaceholder.typicode.com/todos"; axios.get(url) .then((response) => console.log(response.data));
fetch
const url = "https://jsonplaceholder.typicode.com/todos"; fetch(url) .then((response) => response.json()) .then((data) => console.log(data));

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

fetch

15K/s

axios

10K/s

Fastest: fetch (1.5x faster)

View exact numbers

✓ fetch: 15,355 ops/sec
• axios: 9,951 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
axios
fetch

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Browser/OS: Chrome 143 on Linux

View result in a separate tab

fetch

3K/s

axios

2K/s

View exact numbers

Test name	Executions per second
✓ fetch	2,988 Ops/sec
axios	1,724 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. In this case, we have two individual test cases comparing the performance of `axios` and `fetch` libraries in making HTTP requests.

**Benchmark Definition**

The benchmark definition consists of a script preparation code and an HTML preparation code. The script preparation code is empty, which means that the user needs to provide their own script for each test case. However, in this example, the provided scripts are:

* For `axios`: `const url = "https://jsonplaceholder.typicode.com/todos"; axios.get(url).then((response) => console.log(response.data));`
* For `fetch`: `const url = "https://jsonplaceholder.typicode.com/todos"; fetch(url) .then((response) => response.json()) .then((data) => console.log(data));`

These scripts make a GET request to the same JSONPlaceholder API endpoint, but using different libraries.

**Options Compared**

The two options being compared are:

1. **`axios`**: A popular JavaScript library for making HTTP requests.
2. **`fetch`**: A built-in JavaScript API for making HTTP requests.

**Pros and Cons of Each Approach**

* **`axios`**:
	+ Pros:
		- More feature-rich than `fetch`, with support for things like HTTP headers, query parameters, and caching.
		- Can be more convenient to use, especially for complex requests or when dealing with errors.
	+ Cons:
		- Adds an extra dependency to the project, which can increase bundle size.
		- May not perform as well as `fetch` in certain scenarios (e.g., when dealing with large payloads).
* **`fetch`**:
	+ Pros:
		- Built-in to modern browsers, so no additional library needs to be included.
		- Can be more lightweight than `axios`, especially for simple requests.
	+ Cons:
		- Less feature-rich than `axios`, requiring more manual setup and error handling.
		- May not support all the advanced features of `axios`.

**Library: Axios**

`Axios` is a popular JavaScript library for making HTTP requests. It provides a simple and intuitive API for sending HTTP requests, with features like:

* Support for HTTP headers
* Query parameters
* Caching
* Error handling

The purpose of using `axios` in this benchmark is to compare its performance against the built-in `fetch` API.

**Special JS Feature: Fetch**

The `fetch` API is a built-in JavaScript feature that allows making HTTP requests. It provides a simple and modern way of sending HTTP requests, with features like:

* Automatic handling of promises
* Support for HTTP headers and query parameters

The purpose of using `fetch` in this benchmark is to compare its performance against the external library `axios`.

**Other Alternatives**

If you're looking for alternative libraries or APIs for making HTTP requests, some options include:

* **`jQuery.ajax()`**: A part of the jQuery library, which provides a way of sending HTTP requests with features like caching and error handling.
* **`XMLHttpRequest`**: A built-in JavaScript API for making HTTP requests, but less feature-rich than `fetch` or `axios`.
* **`node-http`**: A lightweight HTTP client library for Node.js, which can be used to make HTTP requests.

Overall, the choice of using `axios` or `fetch` (or another library) depends on your specific use case and performance requirements.

axios vs fetch (version: 0)

Comparing performance of: `axios vs fetch`

Created: 4 years ago by: Registered User

Go to the latest result

axios

fetch

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

axios vs fetch (version: 0)

Comparing performance of: axios vs fetch

Created: 4 years ago by: Registered User

Go to the latest result

axios

fetch

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `axios vs fetch`