External API থেকে ডেটা ফেচ করা

Riot.js-এ External API থেকে ডেটা ফেচ করা খুবই সহজ, কারণ Riot.js সাধারণ JavaScript ফিচারগুলোকে সম্পূর্ণ সমর্থন করে, যেমন fetch API বা পুরানো XMLHttpRequest। API থেকে ডেটা ফেচ করার জন্য, আপনি fetch API ব্যবহার করতে পারেন, যা Promise ভিত্তিক এবং অধিক সুবিধাজনক।

১. External API থেকে ডেটা ফেচ করার উদাহরণ

ধরা যাক, আমরা একটি পাবলিক API থেকে ডেটা ফেচ করবো। উদাহরণস্বরূপ, আমরা একটি ফেক JSON প্লেসহোল্ডার API থেকে ডেটা ফেচ করবো, যেমন https://jsonplaceholder.typicode.com/posts।

উদাহরণ: External API থেকে ডেটা ফেচ করা এবং UI তে দেখানো

<!-- DataFetchExample.riot -->
<data-fetch-example>
  <h1>Posts</h1>

  <!-- API থেকে পাওয়া ডেটা দেখানো হচ্ছে -->
  <ul>
    <li each={post in posts}>{post.title}</li>
  </ul>

  <script>
    export default {
      posts: [],  // ডেটা রাখার জন্য স্টেট

      onMounted() {
        // কম্পোনেন্ট মাউন্ট হওয়ার পর API ফেচিং শুরু হবে
        this.fetchData();
      },

      // API থেকে ডেটা ফেচ করা
      async fetchData() {
        try {
          const response = await fetch('https://jsonplaceholder.typicode.com/posts');
          const data = await response.json();
          this.posts = data;  // API থেকে প্রাপ্ত ডেটা স্টেটে রাখা
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      }
    }
  </script>
</data-fetch-example>

ব্যাখ্যা:

1. State: posts নামে একটি স্টেট তৈরি করা হয়েছে যা API থেকে আসা ডেটা ধারণ করবে।
2. onMounted: onMounted() লাইফসাইকেল মেথডে fetchData ফাংশন কল করা হয়েছে, যা কম্পোনেন্ট মাউন্ট হওয়ার পর API ফেচিং শুরু করবে।
3. API ফেচিং: fetch API ব্যবহার করে ডেটা ফেচ করা হয়েছে। response.json() দিয়ে ডেটাকে JSON আকারে পার্স করা হয়েছে এবং সেটিকে posts স্টেটে সংরক্ষণ করা হয়েছে।
4. UI আপডেট: posts স্টেটের পরিবর্তন হলে Riot.js স্বয়ংক্রিয়ভাবে UI আপডেট করে, এখানে each ডিরেকটিভ ব্যবহার করে একটি লিস্টে পোস্টগুলোর শিরোনাম দেখানো হচ্ছে।

২. Loading State এবং Error Handling

ডেটা ফেচ করার সময় আপনি সাধারণত লোডিং স্টেট এবং ত্রুটি হ্যান্ডলিংও যোগ করতে চাইবেন। নিচে একটি উন্নত উদাহরণ দেয়া হল যেখানে লোডিং এবং ত্রুটি হ্যান্ডলিং যোগ করা হয়েছে।

<!-- DataFetchWithLoadingAndError.riot -->
<data-fetch-with-loading-and-error>
  <h1>Posts</h1>

  <!-- লোডিং স্টেট -->
  <div if={isLoading}>Loading...</div>
  <!-- ত্রুটি স্টেট -->
  <div if={hasError}>Error fetching data!</div>

  <!-- API থেকে পাওয়া ডেটা দেখানো হচ্ছে -->
  <ul>
    <li each={post in posts}>{post.title}</li>
  </ul>

  <script>
    export default {
      posts: [],  // API থেকে আসা ডেটা রাখার জন্য স্টেট
      isLoading: true,  // লোডিং স্টেট
      hasError: false,  // ত্রুটি স্টেট

      onMounted() {
        // কম্পোনেন্ট মাউন্ট হওয়ার পর API ফেচিং শুরু হবে
        this.fetchData();
      },

      async fetchData() {
        this.isLoading = true;  // ডেটা ফেচ করার সময় লোডিং চালু
        this.hasError = false;  // ত্রুটি মুছে দেয়া

        try {
          const response = await fetch('https://jsonplaceholder.typicode.com/posts');
          const data = await response.json();
          this.posts = data;  // ডেটা স্টেটে রাখা
        } catch (error) {
          this.hasError = true;  // ত্রুটি ঘটলে ত্রুটি স্টেট চালু
          console.error('Error fetching data:', error);
        } finally {
          this.isLoading = false;  // লোডিং শেষ
        }
      }
    }
  </script>
</data-fetch-with-loading-and-error>

ব্যাখ্যা:

1. লোডিং স্টেট: isLoading নামক একটি স্টেট যোগ করা হয়েছে, যা API থেকে ডেটা ফেচ করার সময় true থাকবে এবং ডেটা ফেচ শেষ হলে false হয়ে যাবে। UI তে লোডিং মেসেজ দেখানোর জন্য if={isLoading} ব্যবহার করা হয়েছে।
2. ত্রুটি হ্যান্ডলিং: hasError নামে একটি স্টেট যোগ করা হয়েছে। যদি API ফেচের সময় কোনো সমস্যা হয়, তবে hasError = true হবে এবং ত্রুটি মেসেজ UI তে প্রদর্শিত হবে।
3. finally: finally ব্লক ব্যবহার করা হয়েছে যাতে ফেচিং শেষ হওয়ার পর লোডিং স্টেট অবশ্যই false হয়, তা সফল হোক বা ত্রুটিপূর্ণ হোক।

৩. Paginated Data ফেচিং

অনেক API তে পেইজিনেটেড ডেটা থাকে। নিচে একটি উদাহরণ দেয়া হল যেখানে API থেকে পেইজিনেটেড ডেটা ফেচ করা হচ্ছে।

<!-- PaginatedDataFetch.riot -->
<paginated-data-fetch>
  <h1>Paginated Posts</h1>

  <div if={isLoading}>Loading...</div>
  <div if={hasError}>Error fetching data!</div>

  <ul>
    <li each={post in posts}>{post.title}</li>
  </ul>

  <button onclick={loadMore} if={hasNextPage}>Load More</button>

  <script>
    export default {
      posts: [],
      currentPage: 1,
      isLoading: false,
      hasError: false,
      hasNextPage: true,

      onMounted() {
        this.fetchData();
      },

      async fetchData() {
        this.isLoading = true;
        this.hasError = false;

        try {
          const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=${this.currentPage}&_limit=10`);
          const data = await response.json();
          this.posts = this.posts.concat(data);
          this.hasNextPage = data.length > 0;
        } catch (error) {
          this.hasError = true;
          console.error('Error fetching data:', error);
        } finally {
          this.isLoading = false;
        }
      },

      loadMore() {
        this.currentPage += 1;
        this.fetchData();
      }
    }
  </script>
</paginated-data-fetch>

ব্যাখ্যা:

1. Paginated Data: API URL এ _page এবং _limit প্যারামিটার ব্যবহার করে পেইজিনেটেড ডেটা ফেচ করা হচ্ছে।
2. Load More: loadMore() ফাংশন ব্যবহার করে নতুন পেইজের ডেটা লোড করা হচ্ছে। hasNextPage স্টেটের মাধ্যমে চেক করা হচ্ছে যে আরও পেইজ আছে কিনা।

Riot.js-এ External API থেকে ডেটা ফেচ করার জন্য fetch API ব্যবহার করা খুবই সহজ। আপনি ডেটা ফেচিং, লোডিং স্টেট, ত্রুটি হ্যান্ডলিং এবং পেইজিনেটেড ডেটা ফেচিং সহ বিভিন্ন ধরনের API ইন্টারঅ্যাকশন সহজেই তৈরি করতে পারেন। Riot.js এর রিয়েকটিভ ডাটা বাইন্ডিং এর মাধ্যমে API থেকে আসা ডেটা UI তে স্বয়ংক্রিয়ভাবে আপডেট হয়, যা আপনার ডেভেলপমেন্ট প্রক্রিয়াকে আরও দ্রুত এবং কার্যকরী করে তোলে।