Asynchronous Data Fetch এবং Error Handling

ReactJS-এ অ্যাসিঙ্ক্রোনাস ডেটা ফেচিং একটি সাধারণ কাজ, যা অ্যাপ্লিকেশনের রিয়েল টাইম ডেটা প্রদর্শন করতে ব্যবহৃত হয়। সাধারণত, ডেটা ফেচ করতে API কল (যেমন fetch বা axios) ব্যবহার করা হয়। অ্যাসিঙ্ক্রোনাস ফেচিংয়ের সময় আপনাকে সঠিকভাবে লোডিং, সাফল্য এবং ত্রুটি (error) হ্যান্ডলিং করতে হয়। এই টিউটোরিয়ালে আমরা ReactJS-এ অ্যাসিঙ্ক্রোনাস ডেটা ফেচ করার পদ্ধতি এবং ত্রুটি হ্যান্ডলিং কিভাবে করা হয় তা বিস্তারিতভাবে আলোচনা করব।

Asynchronous Data Fetch in ReactJS

React-এ অ্যাসিঙ্ক্রোনাস ডেটা ফেচ করার জন্য আপনি সাধারণত useEffect হুক ব্যবহার করেন। useEffect হুক ব্যবহার করার মাধ্যমে আপনি সাইড-এফেক্ট যেমন API কল, ডেটাবেস থেকে ডেটা ফেচ, ইত্যাদি পরিচালনা করতে পারেন।

১. Basic Fetch Example Using useEffect

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

function DataFetching() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')  // API URL
      .then((response) => response.json())  // Convert to JSON
      .then((data) => {
        setData(data);        // Set data to state
        setLoading(false);    // Set loading to false after data is fetched
      })
      .catch((error) => {
        setError(error);      // Set error if the request fails
        setLoading(false);    // Set loading to false in case of error
      });
  }, []); // Empty dependency array means it runs only once, after the first render

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetching;

এখানে:

• useEffect হুকটি API কলটি একবার ফেয়ার করার জন্য ব্যবহৃত হয়।
• fetch() API কল করার মাধ্যমে ডেটা আনা হয়।
• লোডিং স্টেট ব্যবহৃত হচ্ছে ডেটা ফেচ হওয়ার সময় ইন্টারফেসে লোডিং স্টেট প্রদর্শন করতে।
• catch() ব্লক ব্যবহার করা হয়েছে API কলের ত্রুটি হ্যান্ডলিংয়ের জন্য।

Error Handling in Asynchronous Data Fetch

ডেটা ফেচের সময় ত্রুটি (Error) আসা একটি সাধারণ ঘটনা। এর মধ্যে নেটওয়ার্ক সমস্যা, সার্ভার সাইড ত্রুটি, ভুল API URL ইত্যাদি অন্তর্ভুক্ত থাকতে পারে। React-এ Error Boundaries ব্যবহারের পাশাপাশি, অ্যাসিঙ্ক্রোনাস ডেটা ফেচিংয়ের সময়ও ত্রুটির সঠিক হ্যান্ডলিং জরুরি।

২. Error Handling with try-catch Inside async Function

React-এ async/await ব্যবহার করে আপনি আরো পরিষ্কারভাবে অ্যাসিঙ্ক্রোনাস ডেটা ফেচ করতে পারেন এবং ত্রুটি হ্যান্ডলিং করা সহজ হয়।

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

function DataFetching() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error); // Set error if there is any issue with the fetch
      } finally {
        setLoading(false); // Always run this after the try-catch block
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetching;

এখানে:

• async/await ব্যবহৃত হয়েছে ডেটা ফেচিংয়ের জন্য এবং এটি কোডকে আরও পরিষ্কার এবং পড়তে সহজ করে তোলে।
• try-catch ব্লক ব্যবহার করা হয়েছে ত্রুটি ধরার জন্য।
• finally ব্লকটি ব্যবহার করে নিশ্চিত করা হয়েছে যে লোডিং স্টেট ফাইনালি ফালস হবে, যতটা ত্রুটি বা সাফল্য ঘটে।

Error Boundary: Handling Errors in React Component Tree

React-এর Error Boundary একটি স্পেশাল React কম্পোনেন্ট যা এর নীচে থাকা যেকোনো কম্পোনেন্টের ত্রুটি ক্যাচ করতে সাহায্য করে। এটি API কল থেকে ত্রুটি কিংবা ইউজার ইন্টারঅ্যাকশনের কারণে ত্রুটি থেকে রক্ষা করতে পারে।

Error Boundary Example:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong: {this.state.error.message}</h2>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

এটি React কম্পোনেন্টের মধ্যে Error Boundary হিসেবে কাজ করে। যখনই কোনো ত্রুটি ঘটবে, এটি সেই ত্রুটির তথ্য দিয়ে একটি fallback UI (যেমন, একটি ত্রুটি মেসেজ) রেন্ডার করবে।

Error Boundary ব্যবহার:

<ErrorBoundary>
  <DataFetching />
</ErrorBoundary>

এখানে, DataFetching কম্পোনেন্টে যদি কোনো ত্রুটি ঘটে, তবে ErrorBoundary তা ক্যাচ করে এবং একটি fallback UI দেখাবে।

সারাংশ

ReactJS-এ অ্যাসিঙ্ক্রোনাস ডেটা ফেচ এবং ত্রুটি হ্যান্ডলিং গুরুত্বপূর্ণ এবং অপরিহার্য টপিক। useEffect হুক ব্যবহার করে আপনি API কল করতে পারেন এবং ডেটা ফেচ করার সময় async/await বা then/catch পদ্ধতিতে ত্রুটি হ্যান্ডলিং করতে পারেন। এছাড়া, React-এ Error Boundaries ব্যবহার করে, অ্যাপ্লিকেশনটিকে আরও স্থিতিশীল এবং ব্যবহারকারীদের জন্য বন্ধুত্বপূর্ণ করতে পারবেন।