Ứng dụng React Native thường gọi API — dùng fetch tích hợp sẵn (hoặc axios), async/await, và xử lý response, lỗi, và trạng thái loading. Networking hoạt động như trong web JavaScript, thường kết hợp với React Query để cache.
Tạo request với fetch
// fetch tích hợp sẵn (như web); dùng async/await
async function getUsers() {
try {
const response = await fetch('https://api.example.com/users');
if (!response.ok) throw new Error('Request failed'); // kiểm tra status
const data = await response.json(); // parse JSON
return data;
} catch (error) {
console.error(error); // xử lý lỗi
throw error;
}
}
fetch (tích hợp sẵn) tạo request HTTP; await response.json() parse JSON; kiểm tra response.ok và try/catch xử lý lỗi. axios là một lựa chọn thay thế phổ biến (interceptor, API đẹp hơn).
Quản lý các trạng thái loading/lỗi/dữ liệu
function Users() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
getUsers().then(setData).catch(setError).finally(() => setLoading(false));
}, []);
if (loading) return <ActivityIndicator />; // spinner loading
if (error) return <Text>Error</Text>; // UI lỗi
return <FlatList data={data} ... />; // hiển thị dữ liệu
}
App phải xử lý các trạng thái loading, lỗi, và dữ liệu để có UX tốt (spinner khi loading, thông báo lỗi khi thất bại, dữ liệu khi thành công).
React Query (khuyến nghị cho dữ liệu server)
→ React Query / TanStack Query xử lý fetch + CACHE + trạng thái loading/lỗi +
refetch + sync tự động → ít boilerplate hơn nhiều so với useState/useEffect thủ công
→ Khuyến nghị để quản lý dữ liệu server (thay vì tự viết tay mọi fetch)
Tại sao điều này quan trọng
Hiểu networking và API trong React Native là thiết yếu vì hầu hết app giao tiếp với backend — fetch và gửi dữ liệu là nhu cầu gần như phổ quát, nên đây là kiến thức thực hành buộc phải biết.
App liên tục gọi API (tải dữ liệu, submit form, xác thực), và networking React Native hoạt động như web JavaScript (một lợi ích cho lập trình viên web).
Hiểu tạo request (dùng fetch tích hợp sẵn hoặc axios, với async/await, parse JSON, và kiểm tra status code) và xử lý lỗi (try/catch, kiểm tra response.ok) là kỹ năng cốt lõi, vì các lệnh gọi mạng là nền tảng và thường thất bại.
Cực kỳ quan trọng, hiểu cách quản lý các trạng thái loading, lỗi, và dữ liệu là thiết yếu cho UX tốt: hiển thị spinner loading (ActivityIndicator) khi fetch, thông báo lỗi khi thất bại, và dữ liệu khi thành công — xử lý các trạng thái này đúng cách là điều khiến app cảm thấy chỉn chu thay vì hỏng (màn hình trống khi loading, hoặc crash khi lỗi, là UX tệ).
Hiểu React Query/TanStack Query ngày càng có giá trị: nó xử lý fetch, cache, trạng thái loading/lỗi, refetch, và đồng bộ hóa tự động, giảm đáng kể boilerplate của việc quản lý thủ công mọi fetch bằng useState/useEffect — và là cách tiếp cận được khuyến nghị cho dữ liệu server trong React Native hiện đại, phản ánh nhận thức rằng dữ liệu server được hưởng lợi từ việc xử lý chuyên dụng (cache, sync).
Vì hầu hết app React Native giao tiếp với API (một nhu cầu gần như phổ quát) và làm điều đó tốt (fetch/axios, xử lý lỗi, và đặc biệt là quản lý các trạng thái loading/lỗi/dữ liệu cho UX tốt, lý tưởng là với React Query để cache) là thiết yếu cho app hoạt động được, chỉn chu, hiểu networking và API trong React Native là kiến thức thực hành thiết yếu, được áp dụng thường xuyên — một kỹ năng nền tảng cần trong gần như mọi app thực tế fetch dữ liệu, trung tâm cho việc xây dựng app hiển thị dữ liệu backend một cách đáng tin cậy và mượt mà, với React Query là cách tiếp cận hiện đại được khuyến nghị để quản lý dữ liệu server.