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));

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: 3 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:130.0) Gecko/20100101 Firefox/130.0

Browser/OS: Firefox 130 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
axios	14482.4 Ops/sec
fetch	23660.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months 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.

Related benchmarks:

axios vs fetch (version: 0)

Comparing performance of: axios vs fetch

Created: 3 years ago by: Registered User

Jump to the latest result

axios

fetch

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):