Làm việc với API trong React Native: fetch, loading và lỗi
Hướng dẫn thực tế về API layer trong React Native: fetch, loading state, error handling, empty state và tư duy cache.
Bài viết này dành cho người học NativePath và những ai đang xây mobile app thật. Trọng tâm là cách hiểu thực tế, không phải khẩu hiệu hay danh sách thuật ngữ rời rạc.
Vì sao chủ đề này quan trọng
Người dùng không nhìn thấy fetch call, nhưng họ thấy ngay loading khó hiểu, lỗi mơ hồ hoặc màn hình trống. Vì vậy API layer trong React Native phải được xem như một phần của UI. Gọi API thành công một lần chưa đủ. Slow network, empty response và retry path cũng là phần của thiết kế.
Việc học mobile trở nên hữu ích khi chủ đề gắn với một màn hình, một hành động của người dùng và một kết quả có thể kiểm tra. Giữ scope đủ nhỏ để hoàn thành, nhưng đủ thực tế để học hành vi sản phẩm chứ không chỉ học syntax.
Cách tiếp cận
Hãy bắt đầu từ user path trước khi chọn công cụ. Tự hỏi learner hoặc customer nhìn thấy gì đầu tiên, cần dữ liệu nào và flow có thể hỏng ở đâu. Cách này tránh lỗi phổ biến của người mới: tạo nhiều snippet rời rạc mà chưa hiểu app mobile vận hành như một flow thống nhất.
Chọn một screen lấy list từ server. Tạo riêng loading, success, empty và error state. Sau đó kiểm tra refresh hoặc retry có làm state bị rối không.
Khối thực hành
| Cách yếu | Cách tốt hơn |
|---|---|
| Học mọi library cùng lúc | Xây một flow nhỏ rồi chọn tool khi thật sự cần |
| Chỉ kiểm tra happy path | Thêm loading, error hoặc empty state |
| Coi đọc bài là kết quả | Làm mini project và giải thích quyết định |
Danh sách kiểm tra
- chọn một screen hoặc flow nhỏ;
- kiểm tra thêm một failure case;
- liên hệ kết quả với portfolio project;
- nếu giải thích còn mơ hồ, hãy giảm scope;
Một checkpoint tốt là bạn có thể giải thích tradeoff bằng ngôn ngữ đơn giản hay không. Nếu câu trả lời chỉ dựa vào một snippet bạn chưa hiểu, hãy chậm lại và xây phiên bản nhỏ nhất. Khi bạn đổi một điều kiện mà vẫn dự đoán được kết quả, chủ đề đã trở nên thực tế.
Dùng trong NativePath thế nào
Hãy dùng /vi/courses cho lộ trình có cấu trúc. Khi cần luyện ngắn, dùng /vi/games; khi muốn kiểm tra tốc độ và độ chính xác, dùng /vi/arena. Hãy ghi lại điều gì bị lỗi, bạn đã test gì và phiên bản sau nên cải thiện gì. Thói quen này biến bài tập tutorial thành bằng chứng cho portfolio.
Trước khi chuyển tiếp
Hãy chuyển tiếp khi bạn có thể trình bày một ví dụ nhỏ chạy được, nêu một edge case và giải thích vì sao cách làm phù hợp với scope hiện tại. Bạn chưa cần một app hoàn hảo. Bạn cần bước tiếp theo rõ ràng và một kết quả vượt qua kiểm tra trên thiết bị thật.