Fetch & JSON: gọi API

Mọi app web đều lấy dữ liệu từ server ở xa theo một khuôn cố định: chương trình gửi request (yêu cầu), server trả về response (phản hồi). Request gồm URL - một địa chỉ dữ liệu cụ thể gọi là endpoint - và method: GET xin dữ liệu về, POST gửi dữ liệu lên. Response mang status code (mã trạng thái), vài header mô tả, và body - thường là JSON của bài 5: hồi đó nằm yên trong localStorage, giờ đi qua mạng. Tập endpoint một server mở ra gọi là API; hàm fetch để gọi API có sẵn trong trình duyệt lẫn Node 18+.

GET https://api.meohamhoc.vn/meo   <- request: method + URL (endpoint)
HTTP/1.1 200 OK                     <- response: status code
Content-Type: application/json      <- header: cho biet body la JSON
[                                   <- body: du lieu JSON
  { "ten": "Mun", "tuoi": 2 },
  { "ten": "Miu", "tuoi": 1 },
  { "ten": "Xam", "tuoi": 3 }
]

• ▸Request = URL + method (GET lấy về, POST gửi đi); response = status code + header + body.
• ▸Status code: 2xx ổn · 4xx lỗi phía người gọi (404 = không tìm thấy) · 5xx lỗi phía server.
• ▸API (Application Programming Interface) trả JSON - định dạng của bài 5; fetch có sẵn trong trình duyệt và Node 18+.

fetch(url) gửi một request GET và trả về Promise<Response> - đúng loại Promise của bài 8 “Bất đồng bộ”, nên dùng async/await là gọn nhất. Điểm bất ngờ: phải await HAI lần, vì fetch resolve ngay khi nhận xong phần đầu response (status + header), còn body vẫn đang về theo dòng - response.json() đọc hết dòng đó mới parse, nên cũng trả về một Promise.

async function layDanhSachMeo() {
  // await 1: cho server phan hoi
  const response = await fetch("https://api.meohamhoc.vn/meo");
  // await 2: cho doc XONG body roi parse JSON
  const data = await response.json();
  console.log(data); // data la mang that, dung duoc ngay
}
layDanhSachMeo();

[
  { ten: 'Mun', tuoi: 2 },
  { ten: 'Miu', tuoi: 1 },
  { ten: 'Xam', tuoi: 3 }
]

• ▸fetch(url) gửi GET, trả về Promise<Response> - await như mọi Promise (bài 8).
• ▸await 1 chờ phần đầu (status + header); await 2: response.json() đọc hết body (về theo dòng) rồi parse.
• ▸Response còn mang status, ok (true khi 200-299), headers.get(...) - Bước 3 dùng ngay.

Nguồn của vô số bug ngoài đời: gọi API, server trả 404, mà chương trình vẫn chạy tiếp như không có gì. Lý do: với fetch, nhận được MỘT response - bất kể status đẹp xấu - đã tính là xong việc, Promise resolve; nó chỉ reject khi lỗi mạng (mất kết nối, sai domain, server không tồn tại…) - không có response nào để trả:

async function thuHaiLoaiLoi() {
  // 1) tai nguyen khong co that -> server tra 404: fetch van RESOLVE!
  const response = await fetch("https://jsonplaceholder.typicode.com/users/9999");
  console.log("ok:", response.ok, "- status:", response.status);
  // 2) loi MANG that su (sai dia chi, mat ket noi) -> fetch reject
  try {
    await fetch("http://localhost:9/meo"); // khong co server nao o cong 9
  } catch (e) {
    console.log("Loi mang:", e.name, "-", e.message);
  }
}
thuHaiLoaiLoi();

ok: false - status: 404
Loi mang: TypeError - fetch failed

Muốn 404/500 cũng được đối xử như lỗi: tự kiểm response.ok, xấu thì throw new Error(...) - đúng bộ throw/try-catch đã luyện ở bài 7 “Xử lý lỗi & debug”. Đây là mẫu chuẩn đáng thuộc lòng:

async function layDuLieu(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`); // 404/500 -> loi that su
  }
  return response.json();
}
async function main() {
  try {
    const meo = await layDuLieu("https://jsonplaceholder.typicode.com/users/9999");
    console.log(meo);
  } catch (e) {
    console.log("That bai:", e.message);
  }
}
main();

That bai: HTTP 404

• ▸fetch chỉ reject khi LỖI MẠNG (không có response): mất kết nối, sai domain.
• ▸404/500 vẫn resolve - phải tự kiểm response.ok (hoặc status) rồi throw new Error.
• ▸Mẫu chuẩn: layDuLieu kiểm ok + throw; nơi gọi bọc try/catch (bài 7) - mọi thất bại về một chỗ.

Dữ liệu về rồi thì render. Bài 9 “DOM & sự kiện” đã chốt cách an toàn: createElement + đổ chữ bằng textContent - dữ liệu API là dữ liệu bên ngoài, nhét vào innerHTML là mở cửa cho XSS. Mạng thật chậm và hay hỏng - cần “đang tải…” khi chờ, một thông báo dễ hiểu khi lỗi.

// HTML co san:  <p id="trang-thai"></p>  <ul id="danh-sach"></ul>
const trangThai = document.querySelector("#trang-thai");
const danhSach = document.querySelector("#danh-sach");
async function hienThiMeo() {
  trangThai.textContent = "Dang tai...";
  try {
    const meo = await layDuLieu("https://api.meohamhoc.vn/meo");
    trangThai.textContent = "";
    for (const m of meo) {
      const li = document.createElement("li");
      li.textContent = `${m.ten} - ${m.tuoi} tuoi`; // textContent: an toan
      danhSach.append(li);
    }
  } catch (e) {
    trangThai.textContent = "Khong tai duoc danh sach, thu lai sau nhe.";
  }
}
hienThiMeo();

• ▸Dữ liệu từ API = dữ liệu bên ngoài → render bằng createElement + textContent (tránh XSS, bài 9).
• ▸Luôn có trạng thái “đang tải” và thông báo lỗi thân thiện - mạng thật chậm và hay hỏng.
• ▸Nhờ layDuLieu đã throw đủ hai loại lỗi, giao diện chỉ cần MỘT nhánh catch.

GET là chiều lấy về. Chiều ngược lại - gửi bình luận, thêm một mèo con vào danh sách - dùng POST: vẫn hàm fetch, thêm đối số thứ hai gồm method, headers, body. Body phải là chuỗi - object đi qua JSON.stringify (bài 5) - kèm header Content-Type: application/json để server biết cách đọc:

async function themMeo(meoMoi) {
  const response = await fetch("https://api.meohamhoc.vn/meo", {
    method: "POST",
    headers: { "Content-Type": "application/json" }, // bao: body la JSON
    body: JSON.stringify(meoMoi),                    // object -> chuoi JSON
  });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}
async function main() {
  console.log("Server tra ve:", await themMeo({ ten: "Bong", tuoi: 1 }));
}
main();

Server tra ve: { id: 4, ten: 'Bong', tuoi: 1 }

• ▸GET lấy dữ liệu về - POST gửi dữ liệu đi; cùng fetch, thêm đối số thứ hai.
• ▸POST JSON đủ bộ ba: method "POST" + header Content-Type + body JSON.stringify(...).
• ▸Server thường trả 201 (đã tạo) kèm bản ghi mới - vẫn kiểm response.ok như GET.