आप React Native में networking और APIs को कैसे संभालते हैं?

Question

Accepted Answer

React Native apps अक्सर **APIs** को call करते हैं — built-in **fetch** (या **axios**), async/await का उपयोग करते हुए, और responses, errors, तथा loading states को संभालते हुए। Networking web JavaScript की तरह काम करती है, अक्सर caching के लिए React Query के साथ संयोजित। ## fetch के साथ requests बनाना ```jsx // fetch is built-in (like the web); use async/await async function getUsers() { try { const response = await fetch('https://api.example.com/users'); if (!response.ok) throw new Error('Request failed'); // check status const data = await response.json(); // parse JSON return data; } catch (error) { console.error(error); // handle errors throw error; } } ``` `fetch` (built-in) HTTP requests बनाता है; `await response.json()` JSON को parse करता है; `response.ok` की जाँच करना और try/catch errors को संभालते हैं। `axios` एक लोकप्रिय विकल्प है (interceptors, बेहतर API)। ## loading/error/data states का प्रबंधन ```jsx 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 ; // loading spinner if (error) return Error; // error UI return ; // show data } ``` Apps को अच्छे UX के लिए **loading, error, और data** states को संभालना चाहिए (load होते समय spinner, विफलता पर error message, सफलता पर data)। ## React Query (server data के लिए अनुशंसित) ```text → React Query / TanStack Query handles fetching + CACHING + loading/error states + refetching + sync automatically → much less boilerplate than manual useState/useEffect → Recommended for managing server data (vs hand-rolling every fetch) ``` ## यह क्यों महत्वपूर्ण है React Native में networking और APIs समझना आवश्यक है क्योंकि **अधिकांश apps backends के साथ संवाद करते हैं** — data fetch करना और भेजना लगभग सार्वभौमिक आवश्यकता है, इसलिए यह अवश्य-जानने योग्य व्यावहारिक ज्ञान है। Apps लगातार API calls बनाते हैं (data load करना, forms submit करना, authentication), और React Native networking web JavaScript की तरह काम करती है (web developers के लिए एक लाभ)। **Requests बनाना** (built-in `fetch` या `axios`, async/await के साथ, JSON को parse करना, और status codes की जाँच करना) और **errors को संभालना** (try/catch, `response.ok` की जाँच) समझना मुख्य skill है, क्योंकि network calls मूलभूत हैं और आमतौर पर विफल होते हैं। महत्वपूर्ण रूप से, **loading, error, और data states का प्रबंधन कैसे करें** यह समझना अच्छे UX के लिए आवश्यक है: fetch करते समय एक loading spinner (ActivityIndicator) दिखाना, विफलता पर एक error message, और सफलता पर data — इन states को सही ढंग से संभालना वह है जो apps को टूटे हुए के बजाय परिष्कृत महसूस कराता है (load के दौरान एक खाली screen, या error पर एक crash, खराब UX है)। **React Query/TanStack Query** समझना तेज़ी से मूल्यवान होता जा रहा है: यह fetching, **caching**, loading/error states, refetching, और synchronization को स्वचालित रूप से संभालता है, हर fetch को useState/useEffect के साथ manually प्रबंधित करने के boilerplate को नाटकीय रूप से कम करता है — और आधुनिक React Native में server data के लिए **अनुशंसित दृष्टिकोण** है, इस मान्यता को दर्शाते हुए कि server data dedicated handling (caching, sync) से लाभ उठाता है। चूँकि अधिकांश React Native apps APIs के साथ संवाद करते हैं (एक लगभग सार्वभौमिक आवश्यकता) और इसे अच्छी तरह से करना (fetch/axios, error handling, और विशेष रूप से अच्छे UX के लिए loading/error/data states का प्रबंधन, आदर्श रूप से caching के लिए React Query के साथ) कार्यात्मक, परिष्कृत apps के लिए आवश्यक है, React Native में networking और APIs समझना आवश्यक, बार-बार-लागू किया जाने वाला व्यावहारिक ज्ञान है — data fetch करने वाले लगभग हर वास्तविक app में आवश्यक एक मूलभूत skill, उन apps को बनाने के केंद्र में जो backend data को विश्वसनीय और सुचारू रूप से प्रदर्शित करते हैं, React Query server data के प्रबंधन के लिए अनुशंसित आधुनिक दृष्टिकोण होने के साथ।