Hướng Dẫn Toàn Diện về JavaScript Fetch API: Cơ Bản, Ví Dụ, Xử Lý Lỗi và Bảo Mật

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu: Fetch API là gì?

JavaScript đóng một vai trò then chốt trong phát triển front‑end cho các ứng dụng web. Trong số rất nhiều tính năng của nó, Fetch API là một công cụ mạnh mẽ để thực hiện giao tiếp bất đồng bộ với máy chủ. Trong bài viết này, chúng tôi sẽ giải thích cách sử dụng Fetch API một cách thân thiện với người mới bắt đầu và giới thiệu các tính năng của nó qua các ví dụ thực tế.

Vai trò của Fetch API là gì?

Fetch API là một giao diện hiện đại, tiêu chuẩn để xử lý các yêu cầu và phản hồi HTTP. Trước đây, người ta thường dùng XMLHttpRequest, nhưng Fetch API cung cấp một thiết kế đơn giản và trực quan hơn.

Sự khác biệt giữa Fetch API và XMLHttpRequest

Các điểm khác biệt chính giữa Fetch API và XMLHttpRequest truyền thống như sau.

Như đã chỉ ra ở trên, Fetch API được sử dụng rộng rãi như một công cụ linh hoạt và thân thiện hơn với nhà phát triển trong phát triển web hiện đại.

Các trường hợp sử dụng phổ biến của Fetch API

Fetch API thường được áp dụng trong các kịch bản sau.

1. Truy xuất dữ liệu: Lấy thông tin người dùng hoặc dữ liệu bài viết từ các API.
2. Gửi dữ liệu: Gửi dữ liệu biểu mẫu hoặc dữ liệu JSON tới máy chủ.
3. Cập nhật thời gian thực: Nhận dữ liệu động từ máy chủ và cập nhật nội dung trang.
4. Tích hợp API bên ngoài: Kết nối với các API của bên thứ ba để mở rộng chức năng.

Vì những lý do này, Fetch API đã trở thành một phần thiết yếu của phát triển JavaScript hiện đại.

Tóm tắt

Trong phần này, chúng tôi đã giải thích vai trò cơ bản và những ưu điểm của Fetch API. So với XMLHttpRequest truyền thống, Fetch API trực quan hơn, dễ sử dụng hơn và dựa trên Promise, giúp việc xử lý lỗi trở nên đơn giản. Trong phần tiếp theo, chúng ta sẽ khám phá cách sử dụng cơ bản của Fetch API với các ví dụ mã cụ thể.

Tiếp tục, bạn sẽ học cách truy xuất và thao tác dữ liệu bằng Fetch API trong thực tế.

2. Cách sử dụng cơ bản của Fetch API (kèm mã mẫu)

Trong phần này, chúng tôi giải thích cách sử dụng cơ bản của Fetch API bằng các ví dụ mã thực tế. Ngay cả người mới bắt đầu cũng có thể theo dõi, bắt đầu với một yêu cầu GET đơn giản.

Cú pháp cơ bản của Fetch API

Cú pháp cơ bản của Fetch API được hiển thị dưới đây.

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

• url: Xác định URL của yêu cầu.
• options: Dùng để cấu hình phương thức HTTP và header (tùy chọn).
• then: Xử lý phản hồi.
• catch: Xử lý lỗi.

Ví dụ về yêu cầu GET

Dưới đây là một ví dụ cơ bản về yêu cầu GET.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('A network error occurred');
    }
    return response.json();
  })
  .then(data => {
    console.log(data); // Display data
  })
  .catch(error => {
    console.error('Error:', error);
  });

Sử dụng async/await

Với JavaScript hiện đại, bạn có thể viết mã sạch hơn bằng cách sử dụng async/await.

async function fetchPost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error('A network error occurred');
    }
    const data = await response.json();
    console.log(data); // Display data
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchPost();

Thêm tham số URL

Để bao gồm các tham số truy vấn, viết yêu cầu như sau.

const userId = 1;
fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Tóm tắt

Trong phần này, chúng tôi đã đề cập đến những kiến thức cơ bản để thực hiện các yêu cầu GET bằng Fetch API.

• Cú pháp cơ bản: Thiết kế đơn giản và dễ hiểu.
• Xử lý lỗi: Hỗ trợ cả lỗi mạng và lỗi HTTP.
• async/await: Cải thiện khả năng đọc và bảo trì.
• Tham số URL: Dễ dàng triển khai các điều kiện động.

Phần tiếp theo giải thích cách xử lý dữ liệu phản hồi được trả về bởi Fetch API chi tiết hơn.

3. Xử lý Phản hồi và Chuyển đổi Định dạng Dữ liệu

Trong phần này, chúng tôi giải thích cách xử lý các phản hồi được lấy bằng Fetch API. Chúng tôi đặc biệt tập trung vào việc chuyển đổi dữ liệu JSON và làm việc với dữ liệu văn bản và nhị phân.

Đối tượng Phản hồi của Fetch API là gì?

Với Fetch API, phản hồi trả về sau một yêu cầu được cung cấp dưới dạng đối tượng Response.

Các Thuộc tính Chính

Lấy và Chuyển đổi Dữ liệu JSON

Với Fetch API, các máy chủ thường trả về dữ liệu ở định dạng JSON.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Response error: ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Lấy Dữ liệu Văn bản

Trong một số trường hợp, bạn có thể cần lấy dữ liệu dưới dạng văn bản thuần thay vì JSON.

fetch('https://example.com/textfile.txt')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Lấy Dữ liệu Nhị phân

Để lấy hình ảnh hoặc tệp dưới dạng dữ liệu nhị phân, sử dụng blob() hoặc arrayBuffer().

fetch('https://example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById('image').src = url;
  })
  .catch(error => console.error('Error:', error));

Tóm tắt

Trong phần này, bạn đã học cách xử lý các phản hồi của Fetch API và chuyển đổi định dạng dữ liệu.

• Dữ liệu JSON: Hỗ trợ định dạng phản hồi máy chủ phổ biến nhất.
• Dữ liệu văn bản và nhị phân: Lấy các định dạng khác nhau theo nhu cầu.
• Tiêu đề phản hồi: Hữu ích cho việc quản lý dữ liệu và kiểm tra bảo mật.

4. Gửi Yêu cầu POST (Với Các ví dụ Thực tế)

Trong phần này, chúng tôi giải thích cách gửi dữ liệu tới máy chủ bằng yêu cầu POST với Fetch API. Chúng tôi sẽ trình bày cách gửi dữ liệu biểu mẫu và dữ liệu JSON thông qua các ví dụ thực tế.

Cú pháp Cơ bản cho Yêu cầu POST

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})

• method: Chỉ định phương thức HTTP cần sử dụng (trong trường hợp này là POST).
• headers: Chỉ định định dạng dữ liệu (ví dụ: JSON hoặc dữ liệu biểu mẫu).
• body: Chuyển đổi dữ liệu thành chuỗi và gửi đi.

Ví dụ: Gửi Dữ liệu JSON

const userData = {
  name: 'Taro Tanaka',
  email: 'taro.tanaka@example.com'
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

Ví dụ: Gửi Dữ liệu Biểu mẫu

const formData = new FormData();
formData.append('name', 'Taro Tanaka');
formData.append('email', 'taro.tanaka@example.com');

fetch('https://example.com/api/submit', {
  method: 'POST',
  body: formData
})
  .then(response => response.text())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

Ví dụ: Yêu cầu Có Xác thực

fetch('https://example.com/api/protected', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
  },
  body: JSON.stringify({ query: 'data' })
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

Tóm tắt

Trong phần này, chúng tôi đã đề cập đến các kiến thức cơ bản và cách sử dụng thực tế của yêu cầu POST với Fetch API.

• Gửi dữ liệu JSON: Lý tưởng cho việc tích hợp API.
• Gửi dữ liệu biểu mẫu: Hoạt động tốt cho các biểu mẫu đơn giản và tải lên tệp.
• Yêu cầu đã xác thực: Hỗ trợ các yêu cầu bảo mật API.

Phần tiếp theo sẽ đi sâu hơn vào việc xử lý lỗi và các kỹ thuật gỡ lỗi của Fetch API.

5. Xử lý lỗi và kỹ thuật gỡ lỗi

Trong phần này, chúng tôi sẽ xem xét chi tiết về việc xử lý lỗi và các kỹ thuật gỡ lỗi khi sử dụng Fetch API.

Các lỗi thường gặp khi sử dụng Fetch API

Xử lý lỗi cơ bản

fetch('https://jsonplaceholder.typicode.com/posts/9999')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .catch(error => console.error('Error:', error.message));

Xử lý thời gian chờ

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

const timeout = setTimeout(() => controller.abort(), 5000);

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Timeout: The request was aborted');
    } else {
      console.error('Error:', error.message);
    }
  })
  .finally(() => clearTimeout(timeout));

Kỹ thuật gỡ lỗi

1. Ghi log đầu ra:

   fetch('https://example.com/api/data')
     .then(response => {
       console.log('Status code:', response.status);
       return response.json();
     })
     .then(data => console.log('Data:', data))
     .catch(error => console.error('Error:', error.message));
   

2. Công cụ phát triển trình duyệt (tab Mạng):

• Kiểm tra các yêu cầu và phản hồi trong thời gian thực.

Tóm tắt

Trong phần này, chúng tôi đã khám phá các kỹ thuật xử lý lỗi và gỡ lỗi cho Fetch API.

• Lỗi thường gặp: Lỗi mạng, lỗi phân tích cú pháp JSON và các vấn đề về thời gian chờ.
• Xử lý lỗi chi tiết: Các ví dụ thực tế với logic xử lý lỗi rõ ràng.
• Gỡ lỗi: Xác định vấn đề bằng cách sử dụng log và công cụ phát triển trình duyệt.

Phần tiếp theo sẽ giải thích các mẫu sử dụng nâng cao và các biện pháp bảo mật cho Fetch API.

6. Sử dụng nâng cao và các biện pháp bảo mật

Trong phần này, chúng tôi giải thích các kỹ thuật sử dụng nâng cao và các cân nhắc bảo mật cho Fetch API.

Hủy yêu cầu (AbortController)

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

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('The request was aborted');
    } else {
      console.error('Error:', error.message);
    }
  });

setTimeout(() => controller.abort(), 3000); // Abort after 3 seconds

Yêu cầu với thông tin xác thực

const token = 'YOUR_ACCESS_TOKEN';

fetch('https://example.com/api/protected', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

Hỗ trợ CORS (Chia sẻ tài nguyên giữa các nguồn)

fetch('https://example.com/api/data', {
  method: 'GET',
  mode: 'cors'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Tóm tắt

Trong phần này, chúng tôi đã đề cập đến việc sử dụng nâng cao của Fetch API và các biện pháp bảo mật.

• Hủy yêu cầu: Cải thiện hiệu suất bằng cách sử dụng AbortController.
• Yêu cầu đã xác thực: Triển khai token API và các biện pháp chống CSRF.
• Xử lý CORS: Giải quyết các vấn đề nguồn gốc chéo thông qua cấu hình thích hợp.

7. Lỗi thường gặp và khắc phục (kèm bảng tóm tắt)

Trong phần này, chúng tôi giải thích các lỗi phổ biến mà bạn có thể gặp phải khi sử dụng Fetch API và cách khắc phục chúng.

Các lỗi phổ biến và nguyên nhân của chúng

Xử lý lỗi chi tiết

fetch('https://invalid-url.example.com')
  .then(response => response.json())
  .catch(error => {
    if (error.message.includes('Failed to fetch')) {
      console.error('Network error');
    } else {
      console.error('Other error:', error.message);
    }
  });

Tóm tắt

Trong phần này, chúng tôi đã xem lại các lỗi phổ biến của Fetch API và cách xử lý chúng.

• Lỗi thường gặp: Lỗi mạng, lỗi định dạng JSON và các vấn đề về thời gian chờ.
• Xử lý chi tiết: Các ví dụ thực tế minh họa cách xử lý lỗi mạnh mẽ.

8. Ví dụ thực tế: Xây dựng một ứng dụng web đơn giản sử dụng dữ liệu API

Trong phần này, chúng tôi giải thích cách tạo một ứng dụng web đơn giản để lấy dữ liệu từ một API bên ngoài bằng cách sử dụng Fetch API.

Chuẩn bị HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Fetch API Sample App</title>
</head>
<body>
  <h1>Post List</h1>
  <button id="fetchButton">Fetch Data</button>
  <ul id="postList"></ul>
  <p id="errorMessage" style="color: red;"></p>

  <script src="app.js"></script>
</body>
</html>

Tạo mã JavaScript

const fetchButton = document.getElementById('fetchButton');
const postList = document.getElementById('postList');
const errorMessage = document.getElementById('errorMessage');

async function fetchPosts() {
  fetchButton.disabled = true;
  errorMessage.textContent = '';
  postList.innerHTML = '';

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    const posts = await response.json();
    posts.forEach(post => {
      const listItem = document.createElement('li');
      listItem.textContent = `${post.id}: ${post.title}`;
      postList.appendChild(listItem);
    });
  } catch (error) {
    errorMessage.textContent = 'Failed to retrieve data.';
  } finally {
    fetchButton.disabled = false;
  }
}

fetchButton.addEventListener('click', fetchPosts);

Tóm tắt

Trong phần này, chúng tôi đã trình bày cách xây dựng một ứng dụng web thực tế bằng cách sử dụng Fetch API.

• Tính năng cốt lõi: Lấy dữ liệu và hiển thị danh sách.
• Xử lý lỗi: Hiển thị thông báo thân thiện với người dùng khi xảy ra lỗi.

9. Kết luận và các bước tiếp theo

Trong bài viết này, chúng tôi đã bao quát Fetch API một cách toàn diện, từ những kiến thức cơ bản đến việc sử dụng nâng cao và các ví dụ thực tế. Trong phần cuối này, chúng tôi sẽ xem lại các điểm chính của mỗi phần và đề xuất những gì nên học tiếp theo.

Những điểm quan trọng cần nhớ

Cấu trúc cơ bản và tính năng của Fetch API

• Fetch API là một giao diện mạnh mẽ để thực hiện giao tiếp bất đồng bộ với máy chủ trong JavaScript.
• So với XMLHttpRequest truyền thống, nó đơn giản hơn, linh hoạt hơn và dựa trên Promise, giúp cải thiện đáng kể khả năng đọc mã.

Lấy dữ liệu và xử lý phản hồi

• Chúng tôi đã giải thích cách lấy dữ liệu JSON, văn bản và nhị phân.
• Bằng cách sử dụng async/await, bạn có thể viết mã trực quan hơn với việc xử lý lỗi đơn giản hơn.

Gửi dữ liệu và yêu cầu POST

• Bạn đã học cách gửi dữ liệu JSON và dữ liệu biểu mẫu tới máy chủ.
• Các yêu cầu bảo mật bằng token xác thực cũng đã được đề cập.

Kỹ thuật xử lý lỗi và gỡ lỗi

• Chúng tôi đã giới thiệu các giải pháp thực tế cho lỗi mạng và lỗi phân tích JSON.
• Các kỹ thuật nâng cao như thời gian chờ yêu cầu và hủy yêu cầu đã được triển khai.

Xây dựng ứng dụng web thực tế

• Bạn đã xây dựng một ứng dụng web lấy dữ liệu từ API bên ngoài và hiển thị động trên giao diện người dùng.
• Thông qua việc xử lý lỗi và kiểm soát trạng thái nút, bạn đã học các mẫu thiết kế phản ánh các kịch bản phát triển thực tế.

Các bước tiếp theo

Để tận dụng tối đa Fetch API, hãy cân nhắc học các chủ đề sau.

Kỹ thuật triển khai API nâng cao

• Phân trang và sắp xếp: Tối ưu hoá quá trình xử lý khi làm việc với bộ dữ liệu lớn.
• Chức năng tìm kiếm: Thực hiện lọc dữ liệu dựa trên đầu vào của người dùng.
• Tải lên tệp: Xử lý việc tải lên hình ảnh và video.

Cải thiện bảo mật

• OAuth 2.0 và xác thực: Hiểu quy trình xác thực và ủy quyền để kết nối API một cách an toàn.
• Bảo vệ CSRF và XSS: Thực hiện việc gửi biểu mẫu an toàn hơn và phòng thủ trước các script độc hại.

Tích hợp với các công nghệ hiện đại

• Thư viện Axios: Một lựa chọn phổ biến thay thế Fetch API, giúp đơn giản hoá việc quản lý yêu cầu HTTP.
• GraphQL: Mô hình thiết kế API hiện đại, tối ưu hoá việc truy xuất dữ liệu so với các API REST.
• Giao tiếp thời gian thực: Thực hiện trao đổi dữ liệu thời gian thực bằng WebSocket hoặc Server‑Sent Events.

Tài nguyên học tập

Sử dụng các tài liệu và nguồn học chính thức sau để nâng cao kỹ năng của bạn.

• MDN Web Docs (Chính thức): Tài liệu chi tiết về Fetch API
• JSONPlaceholder (API thử nghiệm): API giả miễn phí để thử nghiệm
• Trang học JavaScript: JavaScript.info

Lưu ý cuối cùng

Qua bài viết này, bạn đã nắm được kiến thức và kỹ năng thực tế, bao quát từ những điều cơ bản đến việc sử dụng Fetch API trong thực tế.

Fetch API được sử dụng rộng rãi cho các nhiệm vụ từ việc truy xuất dữ liệu đơn giản đến tích hợp API phức tạp. Bằng cách áp dụng những gì bạn đã học vào các dự án thực tế, bạn có thể có thêm kinh nghiệm thực tiễn.

Các hành động tiếp theo:

• Xây dựng các dự án nhỏ sử dụng API thực để có kinh nghiệm thực tế.
• Củng cố việc xử lý lỗi và các biện pháp bảo mật để nâng cao khả năng sẵn sàng cho môi trường sản xuất.
• Áp dụng các công nghệ mới như GraphQL và giao tiếp thời gian thực để mở rộng bộ kỹ năng của bạn.