GitHub

Khi làm việc với các ứng dụng Web hoặc React/Vue/Angular, việc gửi HTTP requests để giao tiếp với API là tác vụ diễn ra hàng ngày. Trong hệ sinh thái JavaScript, hai công cụ phổ biến nhất để xử lý công việc này là Fetch API (được tích hợp sẵn trong trình duyệt) và Axios (thư viện bên thứ ba). Việc chọn công cụ nào phù hợp phụ thuộc vào quy mô dự án và nhu cầu xử lý dữ liệu của bạn.

Giới thiệu

Lịch sử phát triển

Để hiểu lý do ra đời của Fetch API và Axios, chúng ta cần nhìn lại quá khứ của JavaScript khi gửi HTTP request.

XMLHttpRequest (XHR) – Khởi nguồn: Ra đời từ cuối những năm 1990 bởi Microsoft và được đưa vào chuẩn W3C năm 2006, XMLHttpRequest là nền móng cho kỹ thuật AJAX. Tuy nhiên, cú pháp của XHR rất phức tạp, rườm rà và dễ dẫn đến tình trạng “Callback Hell”.
Axios (Xuất hiện năm 2014): Được phát triển bởi Matt Zabriskie và phát hành lần đầu vào năm 2014. Axios ra đời nhằm giải quyết sự rườm rà của XMLHttpRequest bằng cách bọc XHR trong cơ chế Promise hiện đại, mang lại cú pháp gọn gàng, hỗ trợ Interceptors và tự động parse dữ liệu JSON. Axios nhanh chóng trở thành tiêu chuẩn thực tế (de-facto standard) trong cộng đồng React, Vue và Node.js.
Fetch API (Đạt chuẩn W3C năm 2015): Để thay thế cho XHR đã cũ kỹ mà không cần phụ thuộc thư viện bên thứ ba, nhóm WHATWG (và sau đó là W3C) đã giới thiệu Fetch API như một tính năng tích hợp sẵn của trình duyệt từ năm 2015. Fetch mang lại khả năng xử lý bất đồng bộ native bằng Promise, giúp code sạch hơn mà không làm tăng dung lượng bundle của trang web.

Các thư viện & Công nghệ tương tự

Ngoài Fetch API và Axios, hệ sinh thái Web còn có nhiều giải pháp xử lý HTTP request khác:

SuperAgent: Một thư viện nhẹ, giàu tính năng dành cho cả Browser và Node.js, cung cấp cú pháp dạng chuỗi (chaining API) rất dễ đọc.
jQuery AJAX ($.ajax): Rất phổ biến trong giai đoạn 2010–2015. Dù hiện tại ít được dùng trong các Single Page App hiện đại, nó vẫn tồn tại trong các dự án legacy hoặc WordPress truyền thống.
Ky: Thư viện hiện đại dựa trên Fetch API, hỗ trợ TypeScript, tự động thử lại request lỗi (retry), và nhẹ hơn Axios.
Got: Thư viện HTTP Request dành riêng cho môi trường Node.js (không dùng cho trình duyệt), tích hợp sẵn caching và retry mạnh mẽ.
TanStack Query (React Query) / SWR: Không chỉ đơn thuần gửi request, các thư viện này quản lý toàn bộ trạng thái API (Server State Management), hỗ trợ tự động caching, revalidation và optimistic update (thường dùng kết hợp với Fetch hoặc Axios).

Mức độ phổ biến & Xu hướng sử dụng

Sự chênh lệch về mức độ phổ biến giữa các công cụ phản ánh chính xác xu hướng phát triển của cộng đồng JavaScript:

Axios (Vị thế Thống trị): Là thư viện kết nối HTTP phổ biến nhất hệ sinh thái JS với hơn 100 triệu lượt tải hàng tuần trên npm. Hầu như mọi dự án React, Vue cũ/mới hay các SDK của bên thứ ba đều chọn Axios làm giải pháp mặc định.
Fetch API (Tiêu chuẩn Hiện đại): Do được tích hợp native sẵn trong Browser và Node.js (từ bản v18+), Fetch không có số liệu tải về qua npm. Tuy nhiên, mức độ phủ sóng của nó là 100% trên tất cả các môi trường JavaScript hiện đại. Đặc biệt, các framework như Next.js chọn Fetch làm nền tảng cốt lõi cho cơ chế Caching và Data Fetching.
Got & Ky (Giải pháp Chuyên biệt):
- Got: Đạt khoảng 40 triệu lượt tải/tuần trên npm, là sự lựa chọn hàng đầu cho backend Node.js chuyên nghiệp cần xử lý retry, streaming và HTTP/2.
- Ky: Đạt khoảng 7 triệu lượt tải/tuần, phát triển ổn định như một phiên bản nâng cấp nhỏ gọn cho Fetch trên trình duyệt.
SuperAgent (Thư viện lâu đời): Đạt khoảng 14 triệu lượt tải/tuần. Mặc dù ít được chọn cho các dự án Frontend mới, SuperAgent vẫn duy trì lượng dùng ổn định nhờ tích hợp trong các công cụ testing Node.js (như SuperTest) và các hệ thống legacy.
TanStack Query / SWR (Server State Management): Đạt hơn 70 triệu lượt tải/tuần trên toàn hệ sinh thái npm (bao gồm core, react-query và các adapter). TanStack Query không cạnh tranh trực tiếp với Fetch hay Axios mà đóng vai trò là “lớp quản lý” phía trên, giúp tự động caching dữ liệu, refetch ngầm, retry và quản lý trạng thái API tối ưu cho React, Vue, Svelte và Next.js.
XHR & jQuery AJAX (Legacy): XMLHttpRequest vẫn chạy ngầm dưới nền của nhiều trình duyệt và thư viện, nhưng việc viết code thuần XHR trực tiếp gần như đã biến mất trong các dự án mới.

Cách dùng

XMLHttpRequest (XHR – Legacy JS)

XMLHttpRequest là phương thức truyền thống dựa trên cơ chế sự kiện (event-based). Bạn phải lắng nghe sự kiện onreadystatechange, kiểm tra readyState, trạng thái HTTP status và tự parse dữ liệu JSON bằng JSON.parse().

JavaScript

			
// Gửi GET request bằng XMLHttpRequest (XHR)
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onreadystatechange = function () {
  // readyState 4: Request đã hoàn thành
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
      // Phải tự parse JSON thủ công từ xhr.responseText
      var data = JSON.parse(xhr.responseText);
      console.log(data);
    } else {
      console.error('XHR error:', xhr.statusText);
    }
  }
};

xhr.onerror = function () {
  console.error('Network Error');
};

xhr.send();

		

Fetch API (Native JS)

Fetch là API có sẵn, không cần cài đặt gói bổ sung. Khi nhận phản hồi, bạn phải chuyển đổi kết quả sang dạng JSON thủ công bằng .json().

JavaScript

			
// Gửi GET request bằng Fetch
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // Phải parse JSON thủ công
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

		

Axios (Third-party Library)

Axios tự động chuyển đổi dữ liệu trả về thành JSON và cung cấp cú pháp gọn gàng hơn.

JavaScript

			
// Gửi GET request bằng Axios
import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // Dữ liệu đã tự động parse thành JSON
  })
  .catch(error => console.error('Axios error:', error));

		

So sánh tổng quan

Dưới đây là bảng đối chiếu kỹ thuật giữa 3 giải pháp nền tảng (XHR, Fetch, Axios) và 2 đại diện hiện đại tiêu biểu cho Frontend/Backend (Ky, Got):

Tiêu chí so sánh	XHR	Fetch API	Axios	Ky	Got
Môi trường hoạt động	Browser	Browser / Node.js (v18+)	Browser & Node.js	Browser & Modern JS	Node.js (Backend)
Cài đặt (npm)	Tích hợp sẵn	Tích hợp sẵn	`npm i axios`	`npm i ky`	`npm i got`
Cơ chế xử lý	Event-based (Callback)	Promise (Native)	Promise (XHR wrapper)	Promise (Fetch wrapper)	Promise (Native Node)
Tự động parse JSON	❌ Phải `JSON.parse()`	❌ Phải gọi `.json()`	✅ Tự động (`response.data`)	✅ Tự động (`ky().json()`)	✅ Tự động (`got().json()`)
Reject lỗi HTTP status (4xx/500)	❌ Phải tự kiểm tra `status`	❌ Không reject	✅ Reject tự động	✅ Reject tự động	✅ Reject tự động
Interceptors / Hooks	❌ Không hỗ trợ	❌ Không hỗ trợ	✅ Hỗ trợ tốt	✅ Hỗ trợ (`hooks`)	✅ Hỗ trợ (`hooks`)
Tự động Retry khi lỗi	❌ Không	❌ Không	❌ Cần plugin ngoài	✅ Tự động retry	✅ Tự động retry
Cấu hình Timeout	✅ `xhr.timeout`	❌ Cần `AbortController`	✅ Hỗ trợ sẵn (`timeout`)	✅ Hỗ trợ sẵn (`timeout`)	✅ Hỗ trợ sẵn (`timeout`)
Upload Progress	✅ Hỗ trợ	❌ Chỉ ReadableStream	✅ Hỗ trợ sẵn	❌ Không hỗ trợ	✅ Hỗ trợ
Đối tượng & Trường hợp sử dụng	Code legacy, ứng dụng web đời cũ	Dự án nhỏ, trang web đơn giản, Next.js	Dự án React/Vue vừa & lớn, cần Interceptors	Frontend hiện đại muốn thay Axios gọn nhẹ	Backend Node.js chuyên nghiệp, cào data, HTTP/2

Lưu ý về các công cụ khác:

SuperAgent & jQuery AJAX: Đều là các giải pháp legacy (lâu đời), hiện chủ yếu duy trì trong hệ thống cũ hoặc bộ công cụ testing nên không đưa vào bảng trực diện.
TanStack Query (React Query) / SWR: Đây không phải là HTTP Client gửi request trực tiếp mà là thư viện quản lý Server State. Chúng hoạt động ở “lớp trên” để xử lý caching, retry và tự động refetch ngầm, thường được sử dụng kết hợp cùng Fetch API hoặc Axios bên dưới.

Ứng dụng

Nên dùng Fetch API khi:

Làm các dự án nhỏ, trang web đơn giản hoặc muốn tối ưu dung lượng (không cài thêm library).
Dự án sử dụng các framework hiện đại như Next.js (Fetch được tích hợp sâu để caching và revalidation).
Bạn chỉ cần thực hiện các HTTP Request cơ bản mà không đòi hỏi xử lý lỗi phức tạp.

Nên dùng Axios khi:

Dự án quy mô vừa và lớn với nhiều API endpoints.
Cần các tính năng nâng cao như Interceptors (để gắn Token tự động vào Header, hoặc xử lý refresh token khi gặp 401).
Cần thiết lập baseURL, timeout chung cho toàn bộ ứng dụng.
Cần theo dõi phần trăm tiến độ upload file.

Lời kết

Cả Fetch API và Axios đều hoàn thành tốt nhiệm vụ kết nối API. Nếu bạn ưu tiên sự nhẹ nhàng, không phụ thuộc thư viện ngoài, Fetch là lựa chọn hợp lý. Ngược lại, nếu bạn muốn tiết kiệm thời gian xử lý boilerplate code, cần Interceptors và tự động hóa xử lý lỗi, Axios chắc chắn sẽ giúp quá trình phát triển dự án mượt mà hơn.

So sánh XHR, Fetch API và Axios