React এ API Call করা (Fetch, Axios)

ReactJS-এ API কল করা একটি সাধারণ কার্যকারিতা যা ডেটা সার্ভার থেকে নিয়ে কম্পোনেন্টে প্রদর্শন করতে ব্যবহৃত হয়। React-এ API কল করার জন্য দুটি জনপ্রিয় পদ্ধতি রয়েছে: Fetch API এবং Axios। উভয় পদ্ধতিই HTTP রিকোয়েস্ট পাঠাতে ব্যবহৃত হয়, তবে Axios কিছু অতিরিক্ত সুবিধা প্রদান করে।

১. Fetch API ব্যবহার করে API কল করা

ReactJS-এ fetch() ফাংশনটি একটি ব্রাউজার-বিল্ট ইন মেথড যা HTTP রিকোয়েস্ট পাঠাতে ব্যবহৃত হয়। এটি Promise রিটার্ন করে এবং সাধারণত then() এবং catch() মেথডের মাধ্যমে রেসপন্স হ্যান্ডেল করা হয়।

Fetch API ব্যবহার করার উদাহরণ:

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Fetch API কল করা
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => {
        setData(data); // ডেটা সেট করা
        setLoading(false); // লোডিং স্টেট false করা
      })
      .catch((error) => {
        console.error('Error fetching data: ', error);
        setLoading(false); // যদি কোনো ত্রুটি হয়, তাহলে লোডিং false হবে
      });
  }, []); // empty dependency array মানে এই কোডটি প্রথম render এ একবার চালানো হবে

  if (loading) {
    return <h2>Loading...</h2>;
  }

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

এখানে, fetch() দিয়ে API কল করা হয়েছে এবং ডেটা পাওয়ার পর setData() দিয়ে স্টেট আপডেট করা হয়েছে। যদি API কল সফলভাবে সম্পন্ন হয়, তবে সেই ডেটা data স্টেটে রাখে এবং লোডিং স্টেটটি false সেট করে। যদি কোনো ত্রুটি ঘটে, তা হলে কনসোলে ত্রুটি মেসেজ দেখা যাবে।

২. Axios ব্যবহার করে API Call করা

Axios একটি জনপ্রিয় JavaScript লাইব্রেরি যা API কল করার জন্য ব্যবহার করা হয়। এটি fetch() এর তুলনায় কিছু অতিরিক্ত সুবিধা প্রদান করে, যেমন:

• Request এবং Response ইন্টারসেপ্টর
• Promise ভিত্তিক API
• JSON ডেটা অটোমেটিকভাবে পার্স করা
• Error হ্যান্ডলিং এবং কাস্টম হেডার সেট করা

Axios ইনস্টলেশন:

Axios ব্যবহার করতে প্রথমে এটি ইনস্টল করতে হবে। NPM বা Yarn ব্যবহার করে এটি ইনস্টল করা যেতে পারে:

npm install axios

অথবা:

yarn add axios

Axios ব্যবহার করার উদাহরণ:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Axios API কল করা
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data); // ডেটা সেট করা
        setLoading(false); // লোডিং false করা
      })
      .catch((error) => {
        console.error('Error fetching data: ', error);
        setLoading(false); // ত্রুটি হলে লোডিং false করা
      });
  }, []); // empty dependency array

  if (loading) {
    return <h2>Loading...</h2>;
  }

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

এখানে, Axios এর axios.get() মেথড ব্যবহার করা হয়েছে API থেকে ডেটা ফেচ করার জন্য। Axios স্বয়ংক্রিয়ভাবে রেসপন্সের ডেটা response.data প্রপার্টিতে প্রদান করে, যা তারপর স্টেটে সেট করা হয়। এর পাশাপাশি, যদি কোনো ত্রুটি ঘটে, তা হলে catch() ব্লকে error হ্যান্ডলিং করা হয়।

Fetch এবং Axios এর মধ্যে পার্থক্য

সারাংশ

ReactJS-এ API কল করতে fetch() এবং Axios উভয়ই ব্যবহৃত হয়, তবে Axios কিছু অতিরিক্ত সুবিধা এবং সহজ কনফিগারেশন প্রদান করে। ছোট প্রোজেক্টে fetch() ব্যবহার করা যেতে পারে, তবে বড় এবং জটিল অ্যাপ্লিকেশনের জন্য Axios অধিক সুবিধাজনক।