[JS Basics] Fetch API và JSON: Cách giao tiếp với máy chủ

Trong thế giới phát triển web ngày nay, việc trao đổi dữ liệu giữa trình duyệt (client) và máy chủ (server) là xương sống của mọi ứng dụng động. Hãy tưởng tượng bạn đang ở trong một nhà hàng: bạn (client) gọi món từ thực đơn, người phục vụ (API) nhận yêu cầu của bạn và chuyển đến nhà bếp (server). Nhà bếp chuẩn bị món ăn (dữ liệu) và người phục vụ mang nó ra cho bạn.

Trong kịch bản này, Fetch API chính là người phục vụ hiện đại, nhanh nhẹn và hiệu quả. Còn JSON chính là "ngôn ngữ" chung mà cả bạn và nhà bếp đều hiểu để món ăn được giao đúng yêu cầu.

Cách gửi và nhận dữ liệu với máy chủ bằng JavaScript

Bài viết dưới đây sẽ giúp bạn làm chủ cặp bài trùng "quyền năng" này, từ khái niệm cơ bản nhất đến các ví dụ thực tế, giúp bạn xây dựng những ứng dụng web mạnh mẽ và hiệu quả.

1. "Bóc tách" từng khái niệm: Fetch API và JSON là gì?

Để hiểu tại sao chúng lại là một cặp đôi hoàn hảo, trước tiên hãy cùng tìm hiểu về từng thành phần.

JSON: Ngôn ngữ giao tiếp dữ liệu toàn cầu 🌐

JSON (JavaScript Object Notation) là một định dạng văn bản (text-based) siêu nhẹ để lưu trữ và trao đổi dữ liệu. Mặc dù có tên là "JavaScript", JSON hoàn toàn độc lập về ngôn ngữ và được hỗ trợ bởi hầu hết các ngôn ngữ lập trình hiện đại.

JSON là gì?

Các đặc điểm chính của JSON:

Dễ đọc, dễ viết: Cú pháp của JSON rất giống với cách khai báo đối tượng trong JavaScript, giúp con người dễ dàng đọc và hiểu.
Dễ dàng cho máy tính phân tích: Các ngôn ngữ lập trình có thể chuyển đổi (parse) dữ liệu JSON thành các đối tượng gốc một cách cực kỳ đơn giản.
Cấu trúc Dữ liệu: JSON hỗ trợ hai cấu trúc chính:
- key: value: Tương tự như object trong JavaScript.
- [] Array: Một danh sách các giá trị được sắp xếp.

Ví dụ về một đối tượng người dùng trong JSON:

{
  "id": 101,
  "name": "Nguyen Van A",
  "email": "nguyenvana@example.com",
  "isActive": true,
  "hobbies": ["đọc sách", "chơi game", "du lịch"]
}

Fetch API: Người vận chuyển dữ liệu thế hệ mới 📦

Fetch API là một giao diện hiện đại, được tích hợp sẵn trong hầu hết các trình duyệt, cho phép bạn thực hiện các yêu cầu mạng (network requests) đến máy chủ một cách dễ dàng. Nó được sinh ra để thay thế cho đối tượng XMLHttpRequest (XHR) cũ kỹ và phức tạp hơn.

Fetch API là gì?

Tại sao Fetch API lại vượt trội?

Cú pháp hiện đại và gọn gàng: Sử dụng Promises, giúp xử lý các hoạt động bất đồng bộ (asynchronous) một cách mạch lạc, dễ đọc và tránh được "callback hell".
Linh hoạt và mạnh mẽ: Dễ dàng cấu hình các yêu cầu HTTP như GET, POST, PUT, DELETE và quản lý các header.
Là tiêu chuẩn của web: Được hỗ trợ rộng rãi mà không cần thư viện bên ngoài.

2. Tại sao Fetch và JSON là "cặp bài trùng"?

Sự kết hợp giữa Fetch và JSON tạo nên một quy trình làm việc mượt mà và hiệu quả:

Phía Client (Trình duyệt): Bạn muốn gửi dữ liệu (ví dụ: thông tin đăng ký người dùng) lên server. Bạn tạo một đối tượng JavaScript, sau đó dùng JSON.stringify() để chuyển nó thành một chuỗi JSON.
Gửi yêu cầu: Bạn dùng Fetch API để gửi chuỗi JSON này đến server thông qua một yêu cầu HTTP (thường là POST hoặc PUT).
Phía Server: Máy chủ nhận chuỗi JSON, phân tích (parse) nó trở lại thành một đối tượng hoặc cấu trúc dữ liệu mà ngôn ngữ phía server (như Node.js, Python, Java) có thể hiểu và xử lý.
Phản hồi từ Server: Sau khi xử lý, server thường phản hồi lại bằng một chuỗi JSON khác (ví dụ: thông báo thành công hoặc dữ liệu người dùng vừa tạo).
Nhận phản hồi: Fetch API nhận phản hồi này. Bạn dùng phương thức .json() (một tính năng tiện lợi của Fetch) để tự động phân tích chuỗi JSON phản hồi thành một đối tượng JavaScript mà bạn có thể sử dụng ngay lập tức trong ứng dụng của mình.

Quy trình này gần như là tiêu chuẩn vàng cho các ứng dụng web hiện đại, từ các trang đơn giản đến các hệ thống SPA (Single Page Application) phức tạp xây dựng bằng React, Vue, hay Angular.

3. Chinh phục Fetch API: Từ cơ bản đến nâng cao

Hãy cùng đi vào các ví dụ thực tế để xem sức mạnh của Fetch và JSON. Chúng ta sẽ sử dụng API giả lập từ JSONPlaceholder để thực hành.

GET: Lấy dữ liệu từ Server

Đây là thao tác phổ biến nhất. Ví dụ, lấy danh sách người dùng.

Cách 1: Sử dụng .then() (Cú pháp Promise truyền thống)

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
    // Bước 1: Kiểm tra xem yêu cầu có thành công không (status code 200-299)
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText)
    }
    // Bước 2: Chuyển đổi body của response thành JSON
    return response.json()
  })
  .then((users) => {
    // Bước 3: Bây giờ `users` là một mảng JavaScript chứa các đối tượng người dùng
    console.log(users)
    // Ví dụ: Lấy tên người dùng đầu tiên
    console.log('Tên người dùng đầu tiên:', users[0].name)
  })
  .catch((error) => {
    // Xử lý lỗi nếu có sự cố mạng hoặc lỗi ở các bước trên
    console.error('Đã có lỗi xảy ra!', error)
  })

💡 Điểm cần lưu ý: fetch() trả về một Promise. Lần .then() đầu tiên bạn nhận được đối tượng Response, chứ chưa phải dữ liệu JSON. Bạn cần gọi response.json() để trích xuất và phân tích phần thân (body) của phản hồi.

Cách 2: Sử dụng async/await (Cú pháp hiện đại, dễ đọc hơn) Đây là cách được ưa chuộng hiện nay vì nó giúp mã của bạn trông giống như mã đồng bộ thông thường.

async function getUsers() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users')

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

    const users = await response.json()
    console.log(users)
  } catch (error) {
    console.error('Không thể lấy danh sách người dùng:', error)
  }
}

// Gọi hàm để thực thi
getUsers()

POST: Gửi dữ liệu mới lên Server

Bây giờ, hãy thử tạo một bài viết mới.

// Dữ liệu JavaScript chúng ta muốn gửi đi
const newPost = {
  title: 'Đây là một bài viết mới',
  body: 'Nội dung của bài viết được tạo bằng Fetch API.',
  userId: 1,
}

async function createPost(postData) {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST', // Phương thức yêu cầu
      headers: {
        // Khai báo rằng nội dung chúng ta gửi là JSON
        'Content-Type': 'application/json',
      },
      // Chuyển đổi đối tượng JavaScript thành chuỗi JSON
      body: JSON.stringify(postData),
    })

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

    // Nhận lại dữ liệu mà server đã tạo (thường bao gồm cả ID)
    const createdPost = await response.json()
    console.log('Bài viết đã được tạo thành công:', createdPost)
  } catch (error) {
    console.error('Không thể tạo bài viết:', error)
  }
}

// Gọi hàm để thực thi
createPost(newPost)

Phân tích các tùy chọn quan trọng:

method: 'POST': Chỉ định hành động chúng ta muốn thực hiện.
headers: { 'Content-Type': 'application/json' }: Rất quan trọng! Dòng này báo cho server biết rằng "dữ liệu tôi gửi trong body là ở định dạng JSON nhé".
body: JSON.stringify(newPost): Chuyển đối tượng newPost của JavaScript thành một chuỗi văn bản JSON để có thể gửi qua mạng.

Kết luận: Fetch API và JSON là nền tảng

Fetch API và JSON không chỉ là những công nghệ; chúng là nền tảng cho sự tương tác trên web hiện đại. Việc nắm vững cách chúng hoạt động cùng nhau sẽ mở ra cánh cửa để bạn xây dựng các ứng dụng web phong phú, động và liền mạch.

JSON là định dạng dữ liệu linh hoạt, là "ngôn ngữ chung" giữa client và server.
Fetch API là công cụ mạnh mẽ, hiện đại để vận chuyển dữ liệu đó một cách bất đồng bộ.

Hy vọng rằng qua bài viết này, bạn đã có một cái nhìn toàn diện và sâu sắc về "cặp bài trùng" này. Hãy bắt đầu thực hành ngay hôm nay và biến những ý tưởng ứng dụng của bạn thành hiện thực!