Fetch API là một trong những tính năng mạnh mẽ và linh hoạt nhất của JavaScript, được giới thiệu trong phiên bản ECMAScript 2015 (ES6). Nó cung cấp một giao diện hiện đại và dễ sử dụng để thực hiện các yêu cầu HTTP, thay thế cho XMLHttpRequest cổ điển. Fetch API cho phép gửi và nhận dữ liệu từ một máy chủ web dễ dàng và nhanh chóng, giúp các lập trình viên xây dựng các ứng dụng web động hơn.
Fetch API hoạt động dựa trên khái niệm Promise, giúp xử lý các yêu cầu bất đồng bộ một cách dễ dàng. Dưới đây là cú pháp cơ bản để sử dụng Fetch API:
- url: Địa chỉ URL của tài nguyên cần lấy.
- options: Một đối tượng chứa các tùy chọn cho yêu cầu, chẳng hạn như phương thức (method), tiêu đề (headers), thân yêu cầu (body), v.v.
Các Tính Năng Chính Của Fetch API:
- Hỗ trợ Promise: Fetch API sử dụng Promise để xử lý các yêu cầu bất đồng bộ, giúp mã nguồn trở nên sạch sẽ và dễ đọc hơn so với việc sử dụng callback trong XMLHttpRequest.
- Cú pháp đơn giản: Fetch API có cú pháp ngắn gọn và dễ hiểu. Để thực hiện một yêu cầu GET đơn giản, chỉ cần:
- Hỗ trợ nhiều tùy chọn: Có thể cấu hình yêu cầu của mình bằng cách truyền vào đối tượng options. Ví dụ, để thực hiện một yêu cầu POST với dữ liệu JSON:
- Xử lý lỗi: Fetch API không tự động ném lỗi khi nhận phản hồi HTTP không thành công (ví dụ: 404 hoặc 500). cần kiểm tra thuộc tính ok của đối tượng response để xử lý lỗi:
So Sánh Với XMLHttpRequest
Fetch API mang lại nhiều ưu điểm so với XMLHttpRequest:
- Cú pháp ngắn gọn và dễ đọc hơn: Fetch API sử dụng Promise thay vì callback, giúp mã nguồn trở nên rõ ràng và dễ bảo trì hơn.
- Hỗ trợ tốt hơn cho các thao tác với dữ liệu JSON: Fetch API tích hợp sẵn các phương thức để xử lý dữ liệu JSON dễ dàng.
- Không bị chặn (non-blocking): Fetch API luôn hoạt động bất đồng bộ, trong khi XMLHttpRequest có thể hoạt động đồng bộ (blocking).
Ví Dụ Thực Tế
Dưới đây là một ví dụ thực tế về cách sử dụng Fetch API để lấy dữ liệu từ một API và hiển thị lên giao diện người dùng:
Trong ví dụ trên, chúng ta sử dụng Fetch API để lấy danh sách người dùng từ một API giả lập (jsonplaceholder.typicode.com) và hiển thị tên của họ lên trang web.
Fetch API là một công cụ mạnh mẽ và tiện lợi để thực hiện các yêu cầu HTTP trong JavaScript. Với cú pháp ngắn gọn, hỗ trợ Promise và khả năng cấu hình linh hoạt, Fetch API giúp cho việc xây dựng các ứng dụng web hiện đại trở nên dễ dàng và hiệu quả hơn. Hãy thử sử dụng Fetch API trong dự án của để tận dụng những lợi ích mà nó mang lại.
Giảng viên Trần Thị Mỹ Lệ
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
