ਤੁਸੀਂ 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 ਨੂੰ parse ਕਰਦਾ ਹੈ; `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 ਵਾਂਗ ਕੰਮ ਕਰਦੀ ਹੈ (ਵੈਬ ਡਿਵੈਲਪਰਾਂ ਲਈ ਫ਼ਾਇਦਾ)। **ਬੇਨਤੀਆਂ ਕਰਨਾ** (ਬਿਲਟ-ਇਨ `fetch` ਜਾ `axios`, async/await ਨਾਲ, JSON ਪਾਰਸ ਕਰਨਾ, ਅਤੇ ਸਥਿਤੀ ਕੋਡ ਦੀ ਜਾਂਚ) ਅਤੇ **ਗਲਤੀਆਂ ਨੂੰ ਸੰਭਾਲਣਾ** (try/catch, `response.ok` ਦੀ ਜਾਂਚ) ਨੂੰ ਸਮਝਣਾ ਬੁਨਿਆਦੀ ਹੁਨਰ ਹੈ, ਕਿਉਂਕਿ ਨੈੱਟਵਰਕ ਕਾਲਸ ਬਣਤਰੀ ਹਨ ਅਤੇ ਆਮ ਤੌਰ ਉੱਤੇ ਅਸਫਲ ਹੁੰਦੇ ਹਨ। ak ਮਹੱਤਵਪੂਰਨ ਤੌਰ ਉੱਤੇ, **ਲੋਡਿੰਗ, ਗਲਤੀ, ਅਤੇ ਡੇਟਾ ਸਥਿਤੀਆਂ** ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ ਸਮਝਣਾ ਵਧੀਆ UX ਲਈ ਜ਼ਰੂਰੀ ਹੈ: fetch ਕਰਦੇ ਸਮੇਂ ਇੱਕ ਲੋਡਿੰਗ spinner (ActivityIndicator) ਦਿਖਾਉਣਾ, ਅਸਫਲਤਾ ਉੱਤੇ ਇੱਕ ਗਲਤੀ ਸੁਨੇਹਾ, ਅਤੇ ਸਫਲਤਾ ਉੱਤੇ ਡੇਟਾ — ਇਹਨਾਂ ਸਥਿਤੀਆਂ ਨੂੰ ਸਹੀ ਤਰ੍ਹਾਂ ਸੰਭਾਲਣਾ ਉਹ ਹੈ ਜੋ ਐਪ਼ਸ ਨੂੰ ਪਾਲਿਸ਼ਡ ਜਾ ਟੁੱਟੇ ਹੋਏ ਭਾਵ ਵਿੱਚ ਬਿੱਟੱਸ ਵਿੱਚ ਫਰਕ ਕਰਦਾ ਹੈ (ਲੋਡਿੰਗ ਦੌਰਾਨ ਖਾਲੀ ਸਕ੍ਰੀਨ, ਜਾ ਗਲਤੀ ਉੱਤੇ ਕਰੈਸ਼, ਬੁਰਾ UX ਹੈ)। **React Query/TanStack Query** ਨੂੰ ਸਮਝਣਾ ਵਧ ਰਿਹਾ ਮੁੱਲਵਾਨ ਹੈ: ਇਹ fetching, **caching**, ਲੋਡਿੰਗ/ਗਲਤੀ ਸਥਿਤੀਆਂ, refetching, ਅਤੇ ਸਿੰਕ੍ਰੋਨਾਈਜ਼ੇਸ਼ਨ ਨੂੰ ਸਵਚਾਲਿਤ ਤੌਰ ਉੱਤੇ ਸੰਭਾਲਦਾ ਹੈ, useState/useEffect ਨਾਲ ਹਰੇਕ fetch ਨੂੰ ਮੈਨੁਅਲੀ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਦੀ ਬੋਇਲਰਪਲੇਟ ਨੂੰ ਨਾਟਕੀ ਤੌਰ ਉੱਤੇ ਘਟਾਉਂਦਾ ਹੈ — ਅਤੇ **ਸਰਵਰ ਡੇਟਾ ਲਈ ਸਿਫ਼ਾਰਸ਼ ਕੀਤਾ ਪਹੁੰਚ** ਹੈ ਜਦਕਿ ਸਰਵਰ ਡੇਟਾ ਅੱਗ ਆਉਣਵਾਲਾ ਹੈ ਅਨੁਸਾਰ ਪਛਾਣੀ ਪ੍ਰੰਤਿੰਟ ਪ੍ਰਤਿਫਲਿਤ ਕਰਦੇ ਹੋਏ (caching, sync)। ਕਿਉਂਕਿ ਬਹੁਤੀਆਂ React Native ਐਪ਼ਸ APIs ਨਾਲ ਸੰਚਾਰ ਕਰਦੀਆਂ ਹਨ (ਇੱਕ ਲਗਭਗ-ਸਰਵ-ਵਿਆਪੀ ਲੋੜ) ਅਤੇ ਇਸ ਨੂੰ ਵਧੀਆ ਤਰ੍ਹਾਂ ਕਰਨਾ (fetch/axios, ਗਲਤੀ ਸੰਭਾਲਣਾ, ਅਤੇ ਖ਼ਾਸ ਤੌਰ ਉੱਤੇ ਵਧੀਆ UX ਲਈ ਲੋਡਿੰਗ/ਗਲਤੀ/ਡੇਟਾ ਸਥਿਤੀਆਂ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ, ਆਦਰਸ਼ ਤੌਰ ਉੱਤੇ caching ਲਈ React Query ਨਾਲ) ਜ਼ਰੂਰੀ ਹੈ ਵਿਸ਼ਲੇਸ਼ਣਸ਼ੀਲ, ਪਾਲਿਸ਼ਡ ਐਪ਼ਸ ਲਈ, React Native ਵਿੱਚ ਨੈੱਟਵਰਕਿੰਗ ਅਤੇ APIs ਨੂੰ ਸਮਝਣਾ ਲਾਜ਼ਮੀ, ਬਾਰ-ਬਾਰ-ਅਸਖਲਨ ਵਿਹਾਰਕ ਗਿਆਨ ਹੈ — ਇੱਕ ਬਣਤਰੀ ਹੁਨਰ ਲਗਭਗ ਹਰ ਅਸਲ ਐਪ ਵਿੱਚ ਲੋੜੀ ਜੋ ਡੇਟਾ ਲਿਆਉਂਦਾ ਹੈ, backends ਡੇਟਾ ਨਿਰਭਰਤਾ ਨਾਲ ਅਤੇ ਨਿਰਵਿਘਨ ਤੌਰ ਉੱਤੇ ਖੋਜ ਕਰਨ ਵਾਲੀਆਂ ਐਪ਼ਸ ਨਿਰਮਾਤ ਲਈ ਕੇਂਦਰੀ, React Query ਨਾਲ ਸਰਵਰ ਡੇਟਾ ਲਈ ਸਿਫ਼ਾਰਸ਼ ਕੀਤੀ ਆਧੁਨਿਕ ਪਹੁੰਚ ਹੋ ਰਹੀ ਹੈ।