Sử dụng fetch() để gọi API

Trong JavaScript, fetch() là phương thức giúp gửi yêu cầu HTTP đến server và lấy dữ liệu trả về. Đây là một trong những cách phổ biến nhất để giao tiếp với API. Trong bài học này, chúng ta sẽ tìm hiểu cách sử dụng fetch() để gọi API, xử lý phản hồi bằng .json() và hiển thị dữ liệu trên giao diện.

Sử dụng fetch() để gọi API

1. Cách sử dụng fetch() để lấy dữ liệu từ API

Cú pháp cơ bản của fetch():

fetch(url)
  .then(response => response.json()) // Chuyển response thành JSON
  .then(data => console.log(data))   // Xử lý dữ liệu
  .catch(error => console.error("Lỗi:", error)); // Xử lý lỗi

Giải thích:

• fetch(url): Gửi request đến API.
• .then(response => response.json()): Chuyển đổi phản hồi thành JSON.
• .then(data => console.log(data)): Xử lý dữ liệu nhận được.
• .catch(error => console.error("Lỗi:", error)): Bắt lỗi nếu request thất bại.

2. Xử lý response với .json()

Dữ liệu từ API thường được trả về dưới dạng JSON, do đó chúng ta cần chuyển đổi sang JavaScript Object bằng .json().

Ví dụ:

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json()) // Chuyển dữ liệu JSON thành Object
  .then(post => {
    console.log("Tiêu đề:", post.title);
    console.log("Nội dung:", post.body);
  })
  .catch(error => console.error("Lỗi:", error));

3. Ví dụ: Gọi API từ JSON Placeholder và hiển thị dữ liệu

Lấy danh sách bài viết từ API và hiển thị lên trang web:

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json()) 
  .then(posts => {
    let content = "";
    posts.slice(0, 5).forEach(post => { // Chỉ hiển thị 5 bài viết đầu tiên
      content += `<h2>${post.title}</h2><p>${post.body}</p>`;
    });
    document.body.innerHTML = content;
  })
  .catch(error => console.error("Lỗi:", error));

Giải thích:

• Lấy danh sách bài viết từ API.
• Duyệt qua danh sách và tạo HTML hiển thị.
• Gán nội dung vào document.body.innerHTML để hiển thị trên trang.

Kết luận

• fetch() là công cụ mạnh mẽ giúp gửi request đến API và lấy dữ liệu.
• .json() giúp chuyển dữ liệu API từ JSON sang Object dễ sử dụng.
• Có thể dùng fetch() để lấy dữ liệu động và hiển thị trên giao diện.