API Calling with Fetch & Axios in React Native

React Native এ API Call করা আধুনিক অ্যাপ ডেভেলপমেন্টের সবচেয়ে গুরুত্বপূর্ণ অংশ। যখনই আপনার অ্যাপে সার্ভার থেকে ডেটা আনতে হবে, ডেটা পাঠাতে হবে, বা ডেটাবেজ-এর সাথে কাজ করতে হবে—আপনাকে API Requests করতে হবে। React Native এ সাধারণত দুটি জনপ্রিয় উপায় আছে:

Fetch API (Built-In)
Axios (Third-Party Package)

1. What is an API?

API (Application Programming Interface) হলো সার্ভারের সাথে যোগাযোগ করার মাধ্যম। API এর মাধ্যমে:

ডেটা সার্ভার থেকে আনা যায় (GET)
সার্ভারে ডেটা পাঠানো যায় (POST)
ডেটা আপডেট করা যায় (PUT)
ডেটা ডিলিট করা যায় (DELETE)

2. API Calling Using Fetch

✔ Fetch দিয়ে GET Request

{`useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(data => setPosts(data))
        .catch(error => console.log(error));
}, []);`}

এখানে আমরা API থেকে পোস্ট লিস্ট এনে state এ সেট করেছি।

✔ Fetch দিয়ে POST Request

{`fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        title: 'My Post',
        body: 'This is content',
        userId: 1
    })
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.log(err));`}

3. API Calling Using Axios

✔ Install Axios

npm install axios

✔ Axios দিয়ে GET Request

{`import axios from 'axios';

useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => setPosts(response.data))
        .catch(error => console.log(error));
}, []);`}

Axios fetch এর তুলনায় কিছু বাড়তি সুবিধা দেয় যেমন timeout, interceptors, automatic JSON support।

✔ Axios দিয়ে POST Request

{`axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'New Title',
    body: 'This is body',
    userId: 1
})
.then(res => console.log(res.data))
.catch(err => console.log(err));`}

4. Fetch vs Axios — কোনটি ভালো?

Feature	Fetch	Axios
Built-in?	Yes	No (Need Install)
JSON Auto Convert	❌ No	✔ Yes
Interceptors	❌ No	✔ Yes
Ease of Use	Medium	Very Easy

5. Best Practices

Always handle errors
Use loading states when fetching data
Do not fetch inside UI code — use useEffect
Create a separate api.js file for all API calls
Protect sensitive keys using .env

Conclusion

Fetch এবং Axios দুটোই API Call করার জন্য শক্তিশালী টুল। ছোট প্রোজেক্টে Fetch যথেষ্ট, কিন্তু বড় প্রোজেক্টে Axios ব্যবহার করা বেশি সুবিধাজনক। এই গাইড আপনাকে React Native এ API কাজের পূর্ণ ধারণা দেবে।

API Calling with Fetch & Axios