API Calls এর জন্য Error Handling এবং রেসপন্স ম্যানেজমেন্ট

Riot.js-এ API Calls করার সময় Error Handling এবং Response Management করার জন্য সাধারণভাবে async/await এবং try/catch ব্যবহার করা হয়। যখন আপনি API কল করেন, তখন আপনি ডেটা ফেচ করার সময় loading state, error state, এবং success state ম্যানেজ করতে পারেন। এটি ইউজারের জন্য একটি ভালো ইন্টারঅ্যাকশন নিশ্চিত করে।

এখানে, আমি একটি সাধারণ উদাহরণ দেখাচ্ছি যেখানে আমরা একটি API কল করি এবং সেই রেসপন্স এবং এরর হ্যান্ডলিং ম্যানেজ করি।

উদাহরণ: API Call, Error Handling এবং Response Management

ধরা যাক, আমরা একটি GET রিকোয়েস্ট API কল করতে যাচ্ছি এবং সেটি সফল হলে ডেটা প্রদর্শন করব, আর যদি কোনো ত্রুটি ঘটে, তাহলে ত্রুটি বার্তা প্রদর্শন করব।

API Call কম্পোনেন্ট (ApiCall.riot)

<!-- src/components/ApiCall.riot -->
<api-call>
  <h2>Fetch Data from API</h2>

  <!-- Button to trigger API call -->
  <button onclick={fetchData}>Fetch Data</button>

  <!-- Loading State -->
  <p if={loading}>Loading...</p>

  <!-- Display Data -->
  <div if={data}>
    <h3>Fetched Data:</h3>
    <pre>{JSON.stringify(data, null, 2)}</pre>
  </div>

  <!-- Error Message -->
  <p if={error} class="error">{error}</p>

  <script>
    export default {
      onMounted() {
        this.loading = false;
        this.data = null;
        this.error = null;
      },

      async fetchData() {
        this.loading = true;
        this.error = null;  // Clear previous errors
        try {
          const response = await fetch('https://jsonplaceholder.typicode.com/posts');  // Example API URL
          
          if (!response.ok) {
            throw new Error('Failed to fetch data');
          }

          const result = await response.json();
          this.data = result;  // Store the fetched data
        } catch (err) {
          this.error = `Error: ${err.message}`;  // Handle error and display message
        } finally {
          this.loading = false;  // Reset loading state
        }
      }
    }
  </script>

  <style>
    .error {
      color: red;
      font-size: 14px;
    }
  </style>
</api-call>

ব্যাখ্যা:

1. fetchData ফাংশন:
   • fetchData ফাংশনটি একটি async function যা API call করে এবং এর মাধ্যমে ডেটা নেয়। এই ফাংশনটি:
     • Loading state সেট করে যখন API কল চলছে।
     • Error handling করে যদি API থেকে কোনো ত্রুটি আসে বা রেসপন্স আসতে সমস্যা হয়।
     • Data fetching শেষে ডেটা রিসিভ করে এবং UI-তে সেট করে।
2. try/catch ব্লক:
   • try ব্লকের মধ্যে API কল করা হয়।
   • catch ব্লকটি ত্রুটি হ্যান্ডলিংয়ের জন্য ব্যবহৃত হয়, যদি API কল বা রেসপন্সে কোনো সমস্যা হয় (যেমন: নেটওয়ার্ক সমস্যা, অকার্যকর API ইত্যাদি)।
   • finally ব্লকটি API কলের পর সবসময় এক্সিকিউট হয়, এবং এটি loading স্টেটকে false করে দেয়, যাতে লোডিং বার্তা আর না দেখানো হয়।
3. Conditional Rendering:
   • Loading State: if={loading} শর্তে "Loading..." বার্তা দেখানো হয় যখন API কল চলছে।
   • Data Display: যদি API থেকে ডেটা সফলভাবে পাওয়া যায়, তবে তা JSON.stringify() এর মাধ্যমে UI-তে প্রদর্শন করা হয়।
   • Error Message: যদি কোনো ত্রুটি ঘটে, তবে তা error প্রপার্টি ব্যবহার করে প্রদর্শন করা হয়।

২. API POST Request Error Handling

এখন ধরা যাক, আমরা একটি POST রিকোয়েস্ট API কল করছি, যেখানে ইউজার ইনপুট দিয়ে ডেটা পাঠানো হচ্ছে এবং তার রেসপন্স বা ত্রুটি হ্যান্ডেল করা হচ্ছে।

উদাহরণ: POST Request API Call

<!-- src/components/PostApiCall.riot -->
<post-api-call>
  <h2>Send Data to API</h2>

  <!-- Input Fields -->
  <div>
    <label for="title">Title:</label>
    <input type="text" id="title" value={title} onchange={e => title = e.target.value} />
  </div>

  <div>
    <label for="body">Body:</label>
    <textarea id="body" value={body} onchange={e => body = e.target.value}></textarea>
  </div>

  <button onclick={sendData}>Send Data</button>

  <!-- Loading State -->
  <p if={loading}>Sending Data...</p>

  <!-- Success Message -->
  <p if={success}>Data successfully sent!</p>

  <!-- Error Message -->
  <p if={error} class="error">{error}</p>

  <script>
    export default {
      onMounted() {
        this.title = '';
        this.body = '';
        this.loading = false;
        this.success = false;
        this.error = null;
      },

      async sendData() {
        this.loading = true;
        this.success = false;
        this.error = null;

        try {
          const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              title: this.title,
              body: this.body
            })
          });

          if (!response.ok) {
            throw new Error('Failed to send data');
          }

          const result = await response.json();
          this.success = true;
          console.log('Success:', result);
        } catch (err) {
          this.error = `Error: ${err.message}`;
        } finally {
          this.loading = false;
        }
      }
    }
  </script>

  <style>
    .error {
      color: red;
      font-size: 14px;
    }
  </style>
</post-api-call>

ব্যাখ্যা:

1. POST API Call:
   • এখানে fetch মেথড ব্যবহার করে একটি POST রিকোয়েস্ট পাঠানো হচ্ছে যেখানে ইউজারের ইনপুট (title এবং body) JSON ফর্ম্যাটে API তে পাঠানো হচ্ছে।
   • যদি রিকোয়েস্ট সফল হয়, তবে success মেসেজ দেখানো হবে, এবং যদি কোনো ত্রুটি হয়, তা error প্রপার্টি ব্যবহার করে UI তে প্রদর্শন করা হবে।
2. Conditional Rendering:
   • Loading State: if={loading} শর্তে "Sending Data..." বার্তা দেখানো হয় যখন ডেটা পাঠানো হচ্ছে।
   • Success State: if={success} শর্তে "Data successfully sent!" বার্তা দেখানো হয় যখন ডেটা সফলভাবে পাঠানো হয়।
   • Error State: if={error} শর্তে কোনো ত্রুটি ঘটলে ত্রুটি বার্তা দেখানো হয়।

সারাংশ:

1. Error Handling: API কল করার সময় ত্রুটি (Error) হ্যান্ডল করতে try/catch ব্যবহার করা হয় এবং তা UI-তে উপস্থাপন করা হয়।
2. Response Management: API রেসপন্স সফল হলে ডেটা ইউজার ইন্টারফেসে দেখানো হয়, এবং ত্রুটি হলে ত্রুটি বার্তা প্রদর্শিত হয়।
3. Loading States: API কলের সময় লোডিং অবস্থায় থাকা এবং রেসপন্স পাওয়ার পর লোডিং বন্ধ করা হয়।