Mấy năm trước, mỗi lần đụng tới API là mình lại thấy lấn cấn với đám XMLHttpRequest rườm rà. Viết một cái HTTP request đơn giản mà tốn cả chục dòng code, lại còn dễ dính lỗi callback lồng nhau. Giờ thì khác rồi, từ khi có Fetch API và cú pháp async/await ngon lành, việc gọi REST API bằng JavaScript đã nhẹ nhàng hơn hẳn. Đây không chỉ là công nghệ mới, mà là một sự thay đổi tư duy giúp code của bạn sạch sẽ, dễ đọc và đặc biệt là xử lý lỗi "chuẩn không cần chỉnh". Trong bài chia sẻ này, Phạm Hải sẽ giúp bạn "bắt mạch" chi tiết công cụ này. Nếu bạn đang trong quá trình Học JavaScript cơ bản cho người mới 2026, việc làm chủ Fetch API chắc chắn là tấm vé thông hành bắt buộc để bạn tiến xa hơn trong nghề web.
Quên XMLHttpRequest đi, đây là cách gọi API "sạch-đẹp" nhất 2026!
Trả lời nhanh: Fetch API là một Web API hiện đại được tích hợp sẵn trong các trình duyệt và Node.js, cung cấp giao diện linh hoạt dựa trên Promise để thực hiện các HTTP request, thay thế hoàn hảo cho XMLHttpRequest cũ kỹ.
Working with asynchronous JavaScript has changed a lot over the years. In the past, to get data from an API endpoint, we had to set up a series of complex event listeners. But now, how to use the Fetch API in JavaScript has become an irreplaceable industry standard.
Fetch API cung cấp phương thức fetch() toàn cục, cho phép bạn thực hiện các lệnh gọi mạng một cách thanh lịch. Nó sử dụng Promise cốt lõi, giúp cấu trúc code rõ ràng và tránh được tình trạng "callback hell" khét tiếng. Đặc biệt, từ phiên bản Node.js 18 trở lên, Fetch đã được hỗ trợ native. Điều này có nghĩa là bạn có thể viết code gọi API trên cả Front-end lẫn Back-end với cùng một cú pháp mà không cần cài thêm bất kỳ thư viện nào. Đây thực sự là một cuốn hướng dẫn Fetch API cho người mới bắt đầu hoàn hảo để bạn tự tin bước vào thế giới lập trình web động.
First Fetch API GET example: Get a list of products
Trả lời nhanh: Để thực hiện một GET request, bạn chỉ cần gọi fetch(url). Mặc định, Fetch API sẽ sử dụng phương thức GET để lấy dữ liệu từ server về mà không cần cấu hình thêm.
Hãy bắt đầu với ví dụ Fetch API GET kinh điển nhất: kéo dữ liệu từ một RESTful API về giao diện. Khi bạn truyền một URL vào hàm fetch(), trình duyệt sẽ tự động phát đi một yêu cầu GET.
async function fetchProducts() {
try {
const response = await fetch('https://api.example.com/products');
if (!response.ok) {
throw new Error(`Lỗi gọi API: ${response.status}`);
}
const products = await response.json();
console.log("Danh sách sản phẩm:", products);
} catch (error) {
console.error("Đã xảy ra lỗi:", error);
}
}
After retrieving the JSON data array, you will often want to display it on the user interface. At this point, combining with JavaScript Array methods map filter reduce will help you iterate through the product list and filter out the necessary items extremely quickly. Next, you just need to use the DOM JavaScript HTML element manipulation techniques to print them to the screen. Even if you are taking on the project rest api programming for wordpress, you can absolutely use this GET code to smoothly pull the list of latest posts to the homepage.
Giải mã Response trả về: response.ok, response.status, và response.json()
Trả lời nhanh: Khi Promise của Fetch hoàn thành, nó trả về một Response object. Bạn bắt buộc phải kiểm tra response.ok hoặc Status code trước khi gọi response.json() để parse dữ liệu.
The point that makes many newcomers most confused is that the Fetch API does not directly return the data immediately. Instead, it returns a Response object containing all the metadata of the response from the server.
response.status: Là HTTP Status code (ví dụ 200 là thành công, 404 là Not Found, 500 là lỗi server).response.ok: Một thuộc tính boolean cực kỳ hữu dụng. Nó sẽ trả vềtruenếu status code nằm trong dải 200-299. Đây là "chốt chặn" an toàn nhất để biết request có thực sự thành công hay không.response.json(): Một phương thức bất đồng bộ khác dùng để đọc luồng dữ liệu của Body request và dịch nó thành object JavaScript.
Dữ liệu truyền tải qua mạng luôn ở dạng chuỗi văn bản thuần (text/stream). Phương thức json() đóng vai trò như một thông dịch viên, biến chuỗi vô hồn đó thành cấu trúc dữ liệu mà JavaScript có thể thao tác được.
Tại sao async/await là "chân ái" cho Fetch API?
Trả lời nhanh: Kết hợp Fetch API với async/await giúp mã bất đồng bộ trông giống như mã đồng bộ, giúp luồng code dễ đọc từ trên xuống dưới, dễ debug và quản lý tốt hơn so với dùng chuỗi .then().
Mặc dù bạn hoàn toàn có thể dùng chuỗi .then().catch() với Fetch API và Promise, nhưng ở thời điểm hiện tại, Fetch API với async/await mới thực sự là tiêu chuẩn vàng. Việc sử dụng async/await giúp loại bỏ các hàm callback lồng nhau, làm cho code của bạn đọc y hệt như những dòng lệnh đồng bộ bình thường.
Những tính năng mạnh mẽ này đều được xây dựng dựa trên nền tảng của ES6. Nếu bạn chưa cập nhật, mình khuyên bạn nên xem qua bài viết về ES6 JavaScript tính năng mới cần biết để hiểu sâu hơn về bản chất của Promise. Để nắm bắt tường tận cơ chế chờ đợi (await) đằng sau hậu trường, bài viết phân tích Async Await Promise JavaScript dễ hiểu của mình sẽ giải đáp mọi thắc mắc cho bạn. Tại Phạm Hải, qua quá trình review code cho nhiều dự án, chúng mình nhận thấy việc dùng async/await giúp giảm thiểu tới 40% các lỗi logic liên quan đến luồng dữ liệu.
Not only GET, POST, PUT, DELETE methods are also as easy as pie
Trả lời nhanh: Bằng cách tùy chỉnh tham số thứ hai (options object) trong hàm fetch(), bạn có thể dễ dàng thay đổi method thành POST, PUT, hoặc DELETE để thực hiện các thao tác CRUD.
Hệ thống RESTful API không chỉ sinh ra để đọc dữ liệu. Để xây dựng một ứng dụng thực tế, bạn cần biết cách tạo mới, cập nhật và xóa tài nguyên. Tin vui là Fetch API xử lý việc này với một cú pháp cực kỳ nhất quán. Bạn chỉ cần truyền thêm một object cấu hình (options) vào tham số thứ hai của hàm fetch().
Send JSON data with Fetch API POST to create new resources
Trả lời nhanh: Để gửi dữ liệu lên server, hãy thiết lập method: 'POST', thêm header Content-Type: application/json và bắt buộc chuyển đổi dữ liệu thành chuỗi bằng JSON.stringify() trong body.
When a user registers an account or submits a contact form, you will need to use for example Fetch API POST. Below is the standard code:
async function createNewUser(userData) {
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(userData) // Bắt buộc phải stringify
};
const response = await fetch('https://api.example.com/users', options);
if (!response.ok) throw new Error("Không thể tạo user");
return await response.json();
}
Lỗi phổ biến nhất ở đây là quên JSON.stringify() cho thuộc tính body. Trình duyệt sẽ không tự động dịch object JavaScript của bạn thành JSON đâu. Nếu bạn đang hừng hực khí thế muốn thực hành ngay mà ngặt nỗi chưa có server backend nào để test, bạn có thể tham khảo mẹo Tạo API backend bằng AI trong 10 phút để tự dựng cho mình một endpoint API xịn sò, tha hồ test các phương thức POST nhé.
Update and Delete Data with PUT and DELETE
Trả lời nhanh: Các thao tác Fetch API PUT DELETE hoàn toàn tương tự như POST, bạn chỉ cần đổi thuộc tính method và đính kèm ID của tài nguyên trực tiếp vào endpoint URL.
The Fetch API PUT DELETE operation completes your CRUD cycle.
- Với PUT (hoặc PATCH), bạn gửi kèm
bodychứa dữ liệu mới lên endpoint có chỉ định ID cụ thể (ví dụ:api/users/123). - Với DELETE, mọi thứ còn đơn giản hơn. Bạn thường không cần gửi
body. Chỉ cần setmethod: 'DELETE'là server sẽ tự hiểu bạn muốn "tiêu diệt" tài nguyên tại URL đó.
| HTTP method | Main purpose | Request Body request |
|---|---|---|
| POST | Create new resources | Must have |
| PUT/PATCH | Full/partial update | Must have |
| DELETE | Delete resource | Usually No |
Bí quyết gửi Headers và Authorization Token
Trả lời nhanh: Việc gửi header với Fetch API được thực hiện thông qua thuộc tính headers trong object cấu hình, đóng vai trò sống còn để truyền các token xác thực danh tính người dùng.
Trong môi trường thực tế, 90% các endpoint API có giá trị đều được khóa lại bởi các lớp bảo mật. Việc gửi header với Fetch API là kỹ năng bạn dùng mỗi ngày. Bạn sẽ sử dụng thuộc tính Headers để truyền các thông tin metadata cấu hình, đặc biệt là Bearer Token.
Normally, after the user successfully logs in, the server will return a token string. You can leverage Local Storage Session Storage JavaScript to securely store this token on the browser side. Then, in each subsequent request, you call it and stuff it into the header:
const token = localStorage.getItem('myAccessToken');
const options = {
method: 'GET',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
}
};
const response = await fetch('https://api.example.com/private-data', options);
Xử lý lỗi Fetch API như một "lão làng": Từ try...catch đến response.ok
Trả lời nhanh: Xử lý lỗi với Fetch đòi hỏi chiến thuật hai lớp: dùng try...catch để bắt lỗi mạng (mất kết nối) và kiểm tra thủ công response.ok để bắt các lỗi HTTP (404, 500) từ server.
This is the trap that most Juniors step into. Unlike third-party libraries, Fetch API has a very primitive feature: it only throws an error (reject Promise) when the network is down or DNS cannot be resolved. And if the server is still alive and returns error 404 (Not found) or 500 (Internal server error), Fetch still considers it a request... successful! Therefore, Fetch API error handling requires a layered defense mindset.
Bẫy lỗi mạng (Network Error) với try...catch
Trả lời nhanh: Bọc toàn bộ khối lệnh gọi Fetch bằng try...catch để tóm gọn các lỗi vật lý do đứt cáp, rớt mạng wifi hoặc sai địa chỉ URL hoàn toàn.
Lớp phòng thủ đầu tiên và cơ bản nhất là try...catch. Bất cứ khi nào bạn dùng từ khóa await, hãy đặt nó trong một khối try.
try {
const response = await fetch('https://api.example.com/data');
// Code xử lý tiếp theo...
} catch (error) {
console.error("Lỗi mạng nghiêm trọng. Vui lòng kiểm tra kết nối internet:", error);
}
Khối catch này hoạt động như một cái lưới an toàn, cứu ứng dụng của bạn khỏi cảnh trắng màn hình khi người dùng đột ngột đi vào vùng mất sóng 4G hoặc server bị sập nguồn không thể phản hồi.
Phân biệt lỗi HTTP (404, 500) bằng cách kiểm tra response.ok
Trả lời nhanh: Ngay sau khi nhận được response, bạn phải kiểm tra if (!response.ok) và chủ động dùng lệnh throw new Error() để đẩy các lỗi HTTP xuống khối catch xử lý chung.
Lớp phòng thủ thứ hai nằm ngay sau dòng lệnh fetch. Như mình đã phân tích, Status code dạng 4xx hay 5xx không làm Fetch tự động nhảy vào catch. Bạn phải tự tay làm điều đó.
const response = await fetch(url);
if (!response.ok) {
// Chủ động ném lỗi nếu status không phải 2xx
throw new Error(`Lỗi HTTP! Trạng thái server trả về: ${response.status}`);
}
const data = await response.json();
Tại Phạm Hải, quy chuẩn code (coding convention) của team mình luôn bắt buộc phải có dòng if (!response.ok) này cho mọi request. Nó giúp bạn chủ động kiểm soát luồng lỗi, từ đó hiển thị các thông báo (toast message) thân thiện cho người dùng thay vì để ứng dụng chạy tiếp và crash vì dữ liệu trả về bị undefined.
Experience handling CORS errors is a headache for newbies
Trả lời nhanh: Lỗi CORS xảy ra khi trình duyệt chặn request từ một domain khác vì lý do bảo mật. Cách giải quyết chuẩn xác nhất là cấu hình lại header CORS từ phía server backend.
CORS (Cross-Origin Resource Sharing) is truly the "obsession" of every Front-end programmer. You write code that calls the API perfectly, but the Network tab turns red and the console displays the words "Blocked by CORS policy". Take this to heart: CORS is the browser's security mechanism, it's not the Fetch API's fault.
Nhiều bạn lên mạng tìm hiểu và thử thêm mode: 'no-cors' vào cấu hình fetch. Đừng làm vậy! Cách này chỉ làm trình duyệt bỏ qua cảnh báo, nhưng bạn sẽ nhận lại một "opaque response" (phản hồi mờ) và hoàn toàn không thể đọc được dữ liệu JSON bên trong. Giải pháp triệt để và duy nhất là bạn phải làm việc với team Backend, yêu cầu họ thêm domain Front-end của bạn vào danh sách Access-Control-Allow-Origin trên server.
On the scale: Fetch API, XMLHttpRequest and Axios
Trả lời nhanh: Fetch API là giải pháp hiện đại, nhẹ nhàng và có sẵn. Axios cung cấp nhiều tính năng tự động hóa hơn nhưng yêu cầu cài đặt thêm. XMLHttpRequest thì đã quá lỗi thời và không nên dùng nữa.
The JavaScript ecosystem always has many paths to the same destination. Choosing which API calling tool depends largely on the project scale. Based on the latest updates of 2026, let's analyze which is the optimal choice.
Fetch API compared to the "old man" XMLHttpRequest
Trả lời nhanh: Fetch API vượt trội hoàn toàn so với XMLHttpRequest nhờ cú pháp ngắn gọn, hỗ trợ Promise native và không bị phụ thuộc vào kiến trúc callback rườm rà.
Khi làm bài toán Fetch API so sánh XMLHttpRequest, kết quả là một chiến thắng áp đảo cho Fetch. XMLHttpRequest (XHR) là công nghệ ra đời từ đầu những năm 2000. Để dùng nó, bạn phải khởi tạo object, mở kết nối, thiết lập các hàm onreadystatechange, và tự quản lý các trạng thái từ 0 đến 4. Nó quá cồng kềnh.
Fetch API ra đời chính là để đưa XHR vào viện bảo tàng. Nó cung cấp một API sạch sẽ, hướng đối tượng với Request và Response rõ ràng. Các tài liệu từ MDN trong năm 2026 còn cho thấy Fetch đang tiếp tục được mở rộng với các tính năng như fetchLater() để tối ưu hóa việc gửi dữ liệu ngầm khi người dùng đóng tab. Không có bất kỳ lý do kỹ thuật nào để bạn dùng lại XHR cho các dự án mới hiện nay.
When should you use the Axios library instead of the Fetch API?
Trả lời nhanh: Nên dùng Axios cho các dự án Enterprise cần cấu hình phức tạp, interceptors, tự động parse JSON. Dùng Fetch cho các dự án ưu tiên sự gọn nhẹ, không muốn phụ thuộc thư viện ngoài.
Dù Fetch API rất xuất sắc, nhưng Axios vẫn giữ được vị thế của mình. Axios ghi điểm nhờ khả năng tự động parse JSON (bạn không cần gọi .json()), tự động ném lỗi nếu status code là 4xx/5xx (bỏ qua được bước check response.ok), và đặc biệt là tính năng Interceptors cực kỳ mạnh mẽ giúp bạn đính kèm token tự động vào mọi request hoặc xử lý logic refresh token tập trung.
However, web development trends in 2026 are shifting strongly toward "Zero-dependency" solutions. Fetch API is built-in, so it helps significantly reduce the application's bundle size (Axios weighs about 13KB). If you're working on a small to medium-sized project, Fetch combined with a few self-written helper functions is more than enough. But if you're maintaining a massive system with hundreds of endpoints, Axios is still a worthy investment.
In short, Fetch API combined with async/await is the sharpest tool duo for working with REST APIs in the modern JavaScript world. Mastering request configuration, understanding the nature of the Response object, and especially building a strict error handling script will help you write lines of code that not only run correctly, but are also very stable and professional. Don't be afraid to open your browser, turn on the Console tab, and immediately test out some public APIs in your next project.
Do you have any "tricks" for optimizing Fetch API or any "painful" memories when struggling with CORS errors? Share now in the comments section below for everyone to discuss!
Lưu ý: Các thông tin trong bài viết này chỉ mang tính chất tham khảo. Để có được lời khuyên tốt nhất, vui lòng liên hệ trực tiếp với chúng tôi để được tư vấn cụ thể dựa trên nhu cầu thực tế của bạn.
