Gọi API với fetch: loading, error và cleanup

By Better Wise

Bài trước bạn đã nắm useEffect dùng để chạy side effect sau khi render, và mảng phụ thuộc quyết định effect chạy lại khi nào. Bài này lấy đúng thứ đó để làm việc mà app React nào cũng phải làm: lấy dữ liệu từ server rồi hiển thị.

Bạn sẽ làm được gì sau bài này

• Viết useEffect gọi fetch và đưa kết quả vào state.
• Hiển thị rõ ba khoảnh khắc: đang tải, lỗi, có dữ liệu.
• Hủy request bằng AbortController khi component unmount.

Ba khoảnh khắc của một lần gọi API

Ví dụ đời thường: bạn gọi món ở quán. Có ba khoảnh khắc: đang chờ món, quán báo hết món, món được bưng ra. Giao diện cũng vậy. Nếu thiếu khoảnh khắc "đang chờ", người dùng sẽ nhìn màn hình trắng và tưởng app treo.

flowchart TD
    Start["🟢<br/>Component mount"] --> Loading["⏳<br/>loading = true"]
    Loading --> Check{"res.ok ?"}
    Check -->|"true"| Success["✅<br/>setTodos(data)"]
    Check -->|"false"| Fail["❌<br/>setError(message)"]
    Success --> Done["🛑<br/>loading = false"]
    Fail --> Done

Important: fetch chỉ reject khi có lỗi mạng (mất wifi, sai domain). Server trả 404 hay 500 thì fetch vẫn coi là xong, nên bạn phải tự kiểm tra res.ok.

Ví dụ mẫu: tải danh sách việc cần làm

Ta đi từng bước trên component TodoList của dự án quản lý nhỏ.

1. Khai báo ba state: todos (dữ liệu), loading (mặc định true), error (mặc định null).
2. Trong useEffect, tạo AbortController để có thể hủy request.
3. Gọi fetch, kiểm tra res.ok, rồi res.json() để đổi response thành object.
4. Render theo ba nhánh: loading trước, error sau, cuối cùng là danh sách.

This lesson is premium content. Sign in and purchase the course to view the full content. Sign in