Hướng dẫn sử dụng JavaScript Fetch API: Từ GET, POST đến AbortController

Fetch API trong JavaScript cung cấp một giao diện hiện đại, linh hoạt giúp bạn gửi các yêu cầu HTTP (HTTP requests) tới máy chủ mạng một cách dễ dàng. Thay thế cho XMLHttpRequest cũ kỹ, Fetch API tích hợp sẵn Promise, giúp việc xử lý bất đồng bộ trở nên gọn gàng và dễ bảo trì hơn.

Dưới đây là hướng dẫn kỹ thuật chi tiết giúp bạn làm chủ Fetch API trong các ứng dụng thực tế.

1. Gửi Yêu cầu GET để Lấy Dữ liệu

Yêu cầu GET là phương thức mặc định của fetch(). Bạn có thể sử dụng kết hợp với cú pháp async/await để mã nguồn trông đồng bộ và dễ đọc hơn.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log('Dữ liệu nhận được:', data);
  } catch (error) {
    console.error('Lỗi kết nối:', error);
  }
}

fetchData();

2. Gửi Yêu cầu POST để Tạo Dữ liệu Mới

Khi cần gửi dữ liệu lên server, bạn truyền thêm một đối tượng tùy chọn (options) vào hàm fetch(). Đối tượng này chứa phương thức POST, các cờ headers và phần body được định dạng dưới dạng chuỗi JSON.

async function createPost() {
  const payload = {
    title: 'Bài viết mới trên Bitech',
    content: 'Nội dung hướng dẫn lập trình JavaScript'
  };

  try {
    const response = await fetch('https://api.example.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(payload)
    });

    const result = await response.json();
    console.log('Tạo dữ liệu thành công:', result);
  } catch (error) {
    console.error('Lỗi khi gửi yêu cầu POST:', error);
  }
}

createPost();

3. Xử lý Lỗi Nâng cao với response.ok

Một lưu ý quan trọng: Fetch API không tự động reject Promise khi nhận các mã lỗi HTTP như 404 hay 500. Promise chỉ bị reject khi gặp lỗi mạng (Network Failure). Để xử lý lỗi HTTP đúng cách, bạn cần kiểm tra thuộc tính response.ok:

async function fetchWithHandling() {
  try {
    const response = await fetch('https://api.example.com/data');

    // Kiểm tra xem phản hồi có nằm trong khoảng 200-299 hay không
    if (!response.ok) {
      throw new Error(`Lỗi HTTP! Mã trạng thái: ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Xử lý thất bại:', error.message);
  }
}

4. Hủy Yêu cầu HTTP bằng AbortController

Trong một số trường hợp (ví dụ: người dùng rời trang hoặc yêu cầu chạy quá thời gian cho phép), bạn nên hủy yêu cầu đang thực thi để tiết kiệm tài nguyên. AbortController sẽ giúp bạn làm điều này:

const controller = new AbortController();
const signal = controller.signal;

async function fetchWithTimeout() {
  try {
    // Tự động hủy yêu cầu sau 5 giây nếu chưa hoàn thành
    const timeoutId = setTimeout(() => controller.abort(), 5000);

    const response = await fetch('https://api.example.com/large-data', { signal });
    clearTimeout(timeoutId);

    const data = await response.json();
    console.log('Dữ liệu:', data);
  } catch (error) {
    if (error.name === 'AbortError') {
      console.warn('Yêu cầu đã bị hủy do quá thời gian (timeout).');
    } else {
      console.error('Lỗi khác:', error);
    }
  }
}

fetchWithTimeout();

Tóm tắt

Khi làm việc với JavaScript Fetch API, bạn nên ghi nhớ các nguyên tắc cốt lõi:

• Kết hợp async/await để viết code bất đồng bộ sạch hơn.
• Luôn kiểm tra response.ok để phát hiện kịp thời các lỗi trạng thái HTTP.
• Sử dụng AbortController đối với các yêu cầu cần giới hạn thời gian chờ hoặc có khả năng hủy giữa chừng.

Ngày phát hành: 18/06/2026
Nguồn: www.digitalocean.com