REST API là gì? Giải thích dễ hiểu cho người mới (kèm ví dụ fetch)

Nếu bạn học frontend, sớm muộn cũng gặp câu "gọi API lấy dữ liệu". Tin tuyển dụng nào cũng ghi "biết làm việc với REST API". Bài này giải thích API là gì, REST API là gì, và cách bạn thực sự gọi API trong code, bằng ngôn ngữ đời thường kèm ví dụ chạy được. Thuật ngữ tiếng Anh mình để nguyên vì bạn sẽ gặp đúng những chữ đó khi đi làm.

API là gì

API viết tắt của Application Programming Interface, tạm hiểu là "giao diện để các phần mềm nói chuyện với nhau". Nó là một bộ quy tắc: bạn gửi yêu cầu đúng định dạng, hệ thống bên kia trả về kết quả đúng định dạng.

Ví dụ đời thường: bạn vào quán ăn, không xông thẳng vào bếp tự nấu. Bạn nói với phục vụ "cho một tô phở", phục vụ chuyển vào bếp, rồi bưng phở ra. Bạn không cần biết bếp nấu thế nào. Phục vụ chính là API: một cửa giao tiếp có quy tắc rõ ràng giữa bạn (client) và nhà bếp (server).

Trong lập trình web cũng vậy. App React của bạn không tự có dữ liệu sản phẩm, đơn hàng, hay bài viết. Nó hỏi server qua API: "cho tôi danh sách sản phẩm", server trả về dữ liệu, React đem hiển thị lên màn hình.

REST API là gì

Khi web cần một cách chuẩn để client và server nói chuyện qua mạng, người ta dùng REST. REST viết tắt của Representational State Transfer, do Roy Fielding mô tả trong luận án tiến sĩ năm 2000. Theo MDN, REST là một nhóm ràng buộc kiến trúc phần mềm giúp xây dựng hệ thống phân tán hiệu quả, đáng tin cậy và dễ mở rộng.

Nói cho dễ: REST API là một API chạy trên nền HTTP, tổ chức dữ liệu thành các "resource" và dùng đúng các phương thức HTTP có sẵn để thao tác. Một API được gọi là RESTful khi nó tuân theo các nguyên tắc của REST.

Vài nguyên tắc cốt lõi của REST, hiểu ở mức người mới:

• Client - server: client (trình duyệt, app) và server tách biệt, ai lo việc nấy. Frontend lo giao diện, backend lo dữ liệu.
• Stateless (không trạng thái): mỗi request phải tự chứa đủ thông tin để server xử lý. Server không "nhớ" request trước đó của bạn. Cần xác thực thì mỗi request tự kèm token.
• Uniform interface (giao diện đồng nhất): mọi thứ được mô hình hóa thành resource có địa chỉ rõ ràng, thao tác bằng bộ HTTP methods chuẩn.
• Cacheable (có thể cache): response nói rõ được phép lưu tạm hay không, giúp app nhanh hơn.

Lưu ý thực tế từ chính MDN: rất nhiều API HTTP được gọi là "RESTful" dù không tuân thủ đủ mọi ràng buộc. Với người mới, bạn cứ hiểu REST API là "một dịch vụ HTTP mà bạn gọi được bằng các thư viện web thông thường".

Resource và endpoint

Resource là "thứ" mà API quản lý: một user, một sản phẩm, một bài viết. Trong REST, resource thường là danh từ số nhiều.

Endpoint là địa chỉ URL trỏ tới resource đó. Ví dụ với resource "users":

• GET /users — lấy danh sách user.
• GET /users/42 — lấy đúng user có id 42.
• POST /users — tạo user mới.
• PUT /users/42 — thay thế toàn bộ thông tin user 42.
• PATCH /users/42 — sửa một phần thông tin user 42.
• DELETE /users/42 — xóa user 42.

Điểm hay của REST: cùng một endpoint /users/42, hành động khác nhau là do method khác nhau, không phải do URL kiểu /deleteUser?id=42. URL chỉ trỏ tới "cái gì", method nói "làm gì với nó".

HTTP methods

Mỗi method mang một ý nghĩa cố định. Hai khái niệm cần biết: safe (chỉ đọc, không đổi dữ liệu) và idempotent (gọi nhiều lần kết quả như gọi một lần).

Vì sao quan trọng: ví dụ POST không idempotent, nên bấm nút "đặt hàng" hai lần có thể tạo hai đơn. Hiểu điều này giúp bạn tránh bug nhân đôi dữ liệu. (Thông tin safe/idempotent ở trên lấy đúng theo bảng của MDN.)

Status codes

Sau mỗi request, server trả về một status code ba chữ số cho biết kết quả. Chúng chia theo nhóm: 2xx thành công, 3xx chuyển hướng, 4xx lỗi phía client, 5xx lỗi phía server.

Mẹo phân biệt nhanh: 4xx là "lỗi do bạn gửi sai", 5xx là "lỗi do server". Riêng 401 thật ra nghĩa là "chưa xác thực" (unauthenticated), còn 403 là "đã biết bạn là ai nhưng không đủ quyền" — đây là chỗ người mới hay nhầm.

JSON: định dạng dữ liệu trao đổi

REST API ngày nay chủ yếu trao đổi dữ liệu bằng JSON (JavaScript Object Notation), một định dạng text gọn nhẹ mà cả người lẫn máy đều đọc được:

{
  "id": 42,
  "name": "Mai",
  "email": "mai@example.com",
  "isActive": true
}

JSON dùng cặp "key": value, value có thể là chuỗi, số, boolean, mảng hoặc object lồng nhau. Khi gửi JSON lên server, bạn báo cho server biết bằng header Content-Type: application/json.

Frontend gọi API bằng fetch

Trong JavaScript, cách gọi API phổ biến nhất là hàm fetch có sẵn trong trình duyệt. fetch trả về một Promise, nên thường dùng kèm async/await (nếu bạn chưa rõ phần này, đọc thêm bài async await và Promise).

GET — lấy danh sách:

async function getUsers() {
  try {
    const res = await fetch("https://api.example.com/users");

    if (!res.ok) {
      throw new Error(`HTTP error! Status: ${res.status}`);
    }

    const data = await res.json();
    console.log(data);
    return data;
  } catch (err) {
    console.error("Lỗi gọi API:", err);
  }
}

POST — tạo mới với body JSON:

async function createUser(user) {
  const res = await fetch("https://api.example.com/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(user),
  });

  if (!res.ok) {
    throw new Error(`HTTP error! Status: ${res.status}`);
  }

  return res.json();
}

createUser({ name: "Mai", email: "mai@example.com" });

Vài điểm quan trọng:

• await res.json() để parse JSON từ response thành object JavaScript.
• body phải là chuỗi, nên ta dùng JSON.stringify(...).
• Đặt headers Content-Type: application/json để server hiểu bạn gửi JSON.

Trong React, bạn thường gọi API trong một function rồi đổ dữ liệu vào state để render (xem thêm React Hooks). Phần backend nhận request thường viết bằng Node.js.

Một cái bẫy lớn của fetch

Theo đúng tài liệu MDN: fetch chỉ reject (rơi vào catch) khi mạng lỗi hoặc URL sai, chứ KHÔNG reject khi server trả về 404 hay 500. Nghĩa là server báo lỗi 404/500 thì fetch vẫn coi là "thành công về mặt mạng".

Vì vậy bạn bắt buộc tự kiểm tra res.ok (true khi status nằm trong 200–299) hoặc res.status. Bỏ bước này là nguyên nhân số một của bug "API lỗi mà app không báo gì cả". Hãy luôn giữ khối if (!res.ok) như trong ví dụ trên.

Lỗi thường gặp khi mới gọi API

• CORS (Cross-Origin Resource Sharing): trình duyệt chặn request sang origin khác (khác domain, subdomain hoặc port) vì cơ chế same-origin policy nhằm bảo mật. Lỗi này xử lý ở phía server, không phải sửa trong frontend: server phải trả header Access-Control-Allow-Origin cho phép origin của bạn. Nếu thấy lỗi "blocked by CORS policy" trong Console, đừng loay hoay sửa fetch, hãy báo người làm backend.
• Quên kiểm tra status: như mục trên, không check res.ok khiến app im lặng khi API lỗi.
• Nhầm 401 và 403: 401 là chưa đăng nhập (thiếu/sai token), 403 là đã đăng nhập nhưng không đủ quyền. Sửa sai hướng sẽ tốn thời gian.
• Quên Content-Type khi POST JSON: server có thể không parse được body, trả về 400.
• Quên await res.json(): bạn nhận về một Promise thay vì dữ liệu thật, in ra thấy [object Promise].

Tóm lại

API là cách các phần mềm nói chuyện với nhau qua một cửa giao tiếp có quy tắc. REST API là kiểu API phổ biến nhất trên web: tổ chức dữ liệu thành resource, thao tác bằng HTTP methods (GET/POST/PUT/PATCH/DELETE), và báo kết quả bằng status codes. Ở frontend, bạn gọi API bằng fetch, nhớ kiểm tra res.ok và xử lý lỗi. Nắm chắc những thứ này là bạn đã có một trong các kỹ năng frontend quan trọng nhất khi đi làm.

### Muốn gọi API thành thạo trong dự án thật? >Gọi API, quản lý state và hiển thị dữ liệu là kỹ năng frontend cốt lõi mà mọi nhà tuyển dụng đều hỏi. Trong khóa React PRO của HoleTex, bạn sẽ thực hành gọi REST API, xử lý loading/error, và dựng giao diện từ dữ liệu thật, đi từ căn bản đến sản phẩm hoàn chỉnh. Muốn rèn thêm tư duy giải thuật và phỏng vấn? Thử module luyện Algo của HoleTex.

Bài liên quan

• async/await và Promise trong JavaScript
• Node.js là gì?
• Next.js là gì?
• React Hooks là gì? useState và useEffect
• TypeScript là gì?

Nguồn tham khảo: MDN Web Docs — HTTP request methods, HTTP response status codes, REST (Glossary), Window: fetch() method, Cross-Origin Resource Sharing (CORS). Khái niệm REST theo luận án của Roy Fielding (2000). Đã đối chiếu 2026-06-04.