Fetch API

Fetch API là cách JavaScript gửi request và nhận dữ liệu từ server.
Đây là kiến thức cốt lõi để làm việc với backend, API, database và mọi ứng dụng web hiện đại.

Tư duy cốt lõi:
“Frontend muốn lấy dữ liệu → dùng Fetch.”

---

1. Cú pháp cơ bản

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });
Ý nghĩa:

- **fetch** gửi yêu cầu đến url
- **.json()** chuyển phản hồi thành JSON
- **data** là dữ liệu thật bạn dùng trong giao diện

## 2. Ví dụ GET – lấy dữ liệu từ API

```js
fetch("https://jsonplaceholder.typicode.com/users")
  .then(res => res.json())
  .then(users => {
    console.log(users);
  });

API trả về danh sách người dùng → bạn xử lý như mảng object.

3. Fetch với async/await – viết gọn, dễ đọc hơn

async function loadUsers() {
  let res = await fetch("https://jsonplaceholder.typicode.com/users");
  let users = await res.json();
  console.log(users);
}

loadUsers();

4. Gửi dữ liệu lên server (POST)

fetch("https://api.example.com/create", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "Dai",
    age: 20
  })
})
  .then(res => res.json())
  .then(data => console.log(data));

Ba thành phần quan trọng:

• method
• headers
• body (phải là JSON.stringify)

5. PUT & DELETE

PUT – cập nhật dữ liệu

fetch("https://api.example.com/user/1", {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "New Name" })
});

DELETE – xoá dữ liệu

fetch("https://api.example.com/user/1", {
  method: "DELETE"
});

6. Xử lý lỗi khi fetch

Fetch không báo lỗi cho HTTP 400/500 → bạn cần tự kiểm tra:

async function loadData() {
  try {
    let res = await fetch(url);

    if (!res.ok) {
      throw new Error("Lỗi từ server: " + res.status);
    }

    let data = await res.json();
    console.log(data);

  } catch (err) {
    console.error("Fetch lỗi:", err);
  }
}
## 7. Fetch và DOM – ví dụ thực tế

HTML:

```html
<ul id="user-list"></ul>

JavaScript:

async function loadUsers() {
  let res = await fetch("https://jsonplaceholder.typicode.com/users");
  let users = await res.json();

  let list = document.getElementById("user-list");

  users.forEach(u => {
    let li = document.createElement("li");
    li.innerText = u.name;
    list.appendChild(li);
  });
}

loadUsers();

Kết quả: API → dữ liệu → hiển thị lên giao diện.

8. Sai lầm thường gặp

• Quên JSON.stringify khi POST
• Không kiểm tra res.ok khi fetch
• Gọi fetch liên tục gây quá tải (cần debounce/throttle)
• Xử lý DOM trong vòng lặp lớn → chậm
• Đặt fetch trong sự kiện mà không hạn chế → trùng request

9. Bài tập thực hành

Bài 1

Gọi API users từ:
https://jsonplaceholder.typicode.com/users
→ In ra tên từng người.

Bài 2

Gửi POST đến API test:
https://jsonplaceholder.typicode.com/posts
Body gồm: title, body, userId.

Bài 3

Gọi API todo:
https://jsonplaceholder.typicode.com/todos
→ Lọc và hiển thị chỉ những task completed = true.

Bài 4

Tạo nút “Tải dữ liệu” → click → fetch API → hiển thị danh sách lên giao diện.

10. Kết luận bài học

• Fetch là tiêu chuẩn để gọi API trong JavaScript
• Dùng .json() để chuyển dữ liệu trả về
• POST cần headers + JSON.stringify
• async/await giúp code sạch và rõ ràng