Fetch API là gì? Sử dụng Fetch API như thế nào? Hãy để bài viết dưới đây cho bạn câu trả lời nhé!
Được giới thiệu trong ES2015, Fetch API nổi lên như một phương thức kế thừa hiện đại cho XMLHttpRequest: phương thức fetch() lấy đường dẫn đến tài nguyên và trả về một Promise, giúp nó có thể thực thi một hàm.
Bạn có thể xem cú pháp của phương thức fetch(), dưới đây
Bên trên, chúng ta có nhắc đến đối tượng Promise, cùng nhắc lại một chút khái niệm Promise trong JS.
Đối tượng Promise thể hiện sự thành công (resolve()) hoặc thất bại(reject()) của một thao tác xử lý bất đồng bộ và giá trị kết quả của nó. Chúng ta sử dụng phương thức .then() để thực thi nếu kết quả thành công hoặc .catch() nếu thất bại.
- Cách sử dụng Fetch API
Trong ví dụ trên, bạn có thể thấy phương thức Fetch() hoạt động cùng với .then() và .catch() vì Fetch API sử dụng Promise:
- Thực hiện yêu cầu HTTP tới miền jsonplaceholder typicode.
- Nếu thành công thì chuyển đổi nó thành dữ liệu JSON bằng cách sử dụng phương thức .json()
- Vì phương thức .json() trả về một Promise khác, nếu thành công thì hiển thị dữ liệu.
- Trong trường hợp bất kỳ bước nào ở trên không thành công thì hiển thị lỗi trong bảng điều khiển.
- Async/Await và Fetch API
Async/Await đã được giới thiệu trong ES2017 và hoạt động như một cú pháp cho các Promise, giúp nó có thể hoạt động với các hàm không đồng bộ.
Cùng xem ví dụ và mô tả bên dưới để hiểu rõ hơn cách triển khai Async/Await với Fetch API
Ví dụ trên hoạt động theo cách tương tự như ví dụ trước. Sự khác biệt ở đây là chúng ta không cần sử dụng cú pháp của Promise nữa, thay vào đó chúng ta sử dụng một hàm để định dạng lại promise, giúp dễ đọc và dễ sử dụng hơn. Chúng ta sử dụng async để làm cho hàm này không đồng bộ và sử dụng await chặn việc thực thi lệnh bên trong hàm không đồng bộ cho đến khi quá trình kết thúc. Sau đó, chúng ta sử dụng try/catch để xử lý trạng thái thành công hoặc thất bại.
Một cách khác để sử dụng try/catch với các hàm không đồng bộ là xử lý catch bên ngoài hàm:
Các bạn cần lưu ý là thao tác này sẽ không phát hiện các lỗi máy chủ như 404 (không tìm thấy) hoặc 500 (lỗi máy chủ nội bộ), chỉ phát hiện các lỗi do sự cố mạng hoặc CORS.
Giảng viên: Đoàn Lê Minh Như
Bộ môn Công nghệ Thông tin
Trường Cao đẳng FPT Polytechnic cơ sở TP HCM
