आप React Native मध्ये नेटवर्किंग आणि APIs कसे हाताळता?

Question

Accepted Answer

React Native अ‍ॅप्स वारंवार **APIs** कॉल करतात — बिल्ट-इन **fetch** (किंवा **axios**) वापरून, async/await, आणि प्रतिक्रिया, त्रुटी, आणि लोडिंग स्थितीचे हाताळणे. नेटवर्किंग वेब JavaScript प्रमाणे कार्य करते, बहुतेक वेळा कॅशिंगसाठी React Query सह एकत्रित केले जाते. ## fetch सह विनंत्या करणे ```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` (बिल्ट-इन) HTTP विनंत्या करते; `await response.json()` JSON विश्लेषण करते; `response.ok` तपासणे आणि try/catch त्रुटी हाताळते. `axios` एक लोकप्रिय पर्याय आहे (इंटरसेप्टर्स, सुंदर API). ## लोडिंग/त्रुटी/डेटा स्थितीचे व्यवस्थापन ```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 } ``` अ‍ॅप्स चांगल्या UX साठी **लोडिंग, त्रुटी, आणि डेटा** स्थिती हाताळणे आवश्यक आहे (लोडिंग दरम्यान स्पिनर, अयशस्वी होताना त्रुटी संदेश, यश मिळाल्यास डेटा). ## React Query (सर्व्हर डेटासाठी शिफारसी) ```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 मध्ये नेटवर्किंग आणि APIs समजणे आवश्यक आहे कारण **बहुतेक अ‍ॅप्स बॅकएंडसह संवाद करतात** — डेटा आणून पाठवणे हे जवळजवळ सार्वत्रिक गरज आहे, त्यामुळे हे अवश्य-जाणून घेतलेले व्यावहारिक ज्ञान आहे. अ‍ॅप्स सतत API कॉल करतात (डेटा लोड करणे, फॉर्म सबमिट करणे, प्रमाणीकरण), आणि React Native नेटवर्किंग वेब JavaScript प्रमाणे कार्य करते (वेब डेव्हलपरसाठी लाभ). **विनंत्या करणे** (बिल्ट-इन `fetch` किंवा `axios`, async/await सह, JSON विश्लेषण, आणि स्थिती कोड तपासणे) आणि **त्रुटी हाताळणे** (try/catch, `response.ok` तपासणे) समजणे हे मूल कौशल्य आहे, कारण नेटवर्क कॉल मूलभूत आहेत आणि सामान्यतः अयशस्वी होतात. गंभीरपणे, **लोडिंग, त्रुटी, आणि डेटा स्थिती** **व्यवस्थापन** करणे कसे हे समजणे चांगल्या UX साठी आवश्यक आहे: फेच करत असताना लोडिंग स्पिनर (ActivityIndicator) दाखवणे, अयशस्वी होताना त्रुटी संदेश, आणि यश मिळाल्यास डेटा — या स्थितीचे योग्य हाताळणे हे अ‍ॅप्सला पॉलिश केल्याप्रमाणे महसूस करायला देते न की खराब (लोडिंग दरम्यान रिक्त स्क्रीन, किंवा त्रुटीवर क्रॅश हा खराब UX आहे). **React Query/TanStack Query** समजणे हे वाढत्या महत्वाचे आहे: हे फेचिंग, **कॅशिंग**, लोडिंग/त्रुटी स्थिती, रिफेचिंग, आणि सिंक्रोनाइজेशन स्वयंचलितपणे हाताळते, useState/useEffect सह प्रत्येक फेच व्यवस्थापित करण्याच्या बॉयलरप्लेटमध्ये नाटकीय कमी — आणि आधुनिक React Native मध्ये सर्व्हर डेटासाठी **शिफारसी केलेला दृष्टिकोन** आहे, जो सर्व्हर डेटाला समर्पित हाताळणीचा लाभ होतो (कॅशिंग, सिंक) हे स्वीकृती दर्शवतो. बहुतेक React Native अ‍ॅप्स APIs सह संवाद करत असल्याने (जवळजवळ सार्वत्रिक गरज) आणि हे चांगल्याने करणे (fetch/axios, त्रुटी हाताळणे, आणि विशेषतः लोडिंग/त्रुटी/डेटा स्थिती व्यवस्थापन चांगल्या UX साठी, आदर्शपणे React Query सह कॅशिंगसाठी) हे कार्यात्मक, पॉलिश अ‍ॅप्सासाठी आवश्यक आहे, React Native मध्ये नेटवर्किंग आणि APIs समजणे हे आवश्यक, वारंवार लागू होणारे व्यावहारिक ज्ञान आहे — डेटा आणून पाठवणारे जवळजवळ प्रत्येक वास्तविक अ‍ॅपमध्ये आवश्यक मूलभूत कौशल्य, बॅकएंड डेटा विश्वसनीयपणे आणि सुचरुतपणे प्रदर्शित करणारे अ‍ॅप्स तयार करण्यासाठी केंद्रीय, React Query सर्व्हर डेटा व्यवस्थापित करण्याचा शिफारसी केलेला आधुनिक दृष्टिकोन असल्याने.