तपाईं React Native मा नेटवर्किङ र APIs लाई कसरी सम्भाल्नुहुन्छ?

Question

Accepted Answer

React Native अनुप्रयोगहरूले बारम्बार **APIs** कल गर्छन् — built-in **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` (built-in) HTTP अनुरोधहरू गर्छ; `await response.json()` JSON पार्स गर्छ; `response.ok` जाँच गरिरहेको र try/catch त्रुटिहरू सम्भाल्छ। `axios` एक लोकप्रिय विकल्प हो (interceptors, राम्रो 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 को लागि **लोडिङ, त्रुटि, र डेटा** अवस्थाहरू सम्भाल्नु पर्छ (लोड गर्दा spinner, विफलतामा त्रुटि सन्देश, सफलतामा डेटा)। ## 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 बुझ्न आवश्यक छ किनभने **अधिकांश अनुप्रयोगहरू backends संग संचार गर्छन्** — डेटा प्राप्त गर्ने र पठाउने लगभग सार्वभौमिक आवश्यकता हो, त्यसैले यो अनिवार्य व्यावहारिक ज्ञान हो। अनुप्रयोगहरूले लगातार API कलहरू गर्छन् (डेटा लोड गर्दै, फार्महरू जमा गर्दै, प्रमाणीकरण), र React Native नेटवर्किङ वेब JavaScript जस्तै काम गर्छ (वेब विकासकर्ताहरूको लागि लाभ)। **अनुरोध गर्दै** (built-in `fetch` वा `axios`, async/await संग, JSON पार्स गर्दै, र स्थिति कोडहरू जाँच गर्दै) र **त्रुटिहरू सम्भाल्दै** (try/catch, `response.ok` जाँच गर्दै) बुझ्न मूल कौशल हो, किनकि नेटवर्क कलहरू आधारभूत छन् र सामान्यतः विफल हुन्छन्। गुरुत्वपूर्ण रूपमा, **लोडिङ, त्रुटि, र डेटा अवस्थाहरू व्यवस्थापन गर्ने** तरिका बुझ्न आवश्यक छ अच्छो UX को लागि: लोडिङ spinner (ActivityIndicator) दुखाइरहेको विफलतामा, त्रुटि सन्देश विफलतामा, र सफलतामा डेटा — यी अवस्थाहरू सही तरिकाले सम्भाल्ने यो हो जसले अनुप्रयोगहरूलाई पॉलिश गरिएको महसुस गराउँछ अलि खराब (लोडिङको समयमा खाली स्क्रिन, वा त्रुटिमा क्र्याश, खराब UX हो)। **React Query/TanStack Query** बुझ्न क्रमशः मूल्यवान छ: यो प्राप्त गर्दै, **क्यासिङ**, लोडिङ/त्रुटि अवस्थाहरू, refetching, र synchronization स्वचालित रूपमा सम्भाल्छ, useState/useEffect संग प्रत्येक fetch लाई म्यानुअली व्यवस्थापन गरेको boilerplate नाटकीय रूपमा घटाइरहेको — र आधुनिक React Native मा सर्भर डेटाको लागि **सिफारिस गरिएको दृष्टिकोण** हो, यो स्वीकार गर्दै कि सर्भर डेटा समर्पित हेराइ (क्यासिङ, सिङ्क) लाभ गर्छ। अधिकांश React Native अनुप्रयोगहरू APIs संग संचार गर्छन् (लगभग सार्वभौमिक आवश्यकता) र यो राम्रोसँग गर्दै (fetch/axios, त्रुटि हेराइ, र विशेष गरी अच्छो UX को लागि लोडिङ/त्रुटि/डेटा अवस्थाहरू व्यवस्थापन गर्दै, आदर्श रूपमा क्यासिङको लागि React Query संग) कार्यात्मक, पॉलिश गरिएका अनुप्रयोगहरू को लागि आवश्यक हो, React Native मा नेटवर्किङ र APIs बुझ्न आवश्यक छ, बारम्बार-अनुप्रयोग गरिएको व्यावहारिक ज्ञान — लगभग प्रत्येक वास्तविक अनुप्रयोगमा आवश्यक आधारभूत कौशल जसले डेटा प्राप्त गर्छ, backend डेटा विश्वसनीयतापूर्वक र सुगमतापूर्वक प्रदर्शन गर्ने अनुप्रयोगहरू निर्माण गर्न केन्द्रीय, React Query सर्भर डेटा व्यवस्थापन को लागि सिफारिस गरिएको आधुनिक दृष्टिकोण भई रहेको।