API এবং Ajax Requests ব্যবস্থাপনা

Riot.js-এ API এবং AJAX requests পরিচালনা করা খুবই সহজ। Riot.js সরাসরি API কলের জন্য কোনো বিল্ট-ইন ফিচার প্রদান না করলেও, আপনি JavaScript এর সাধারণ fetch API বা অন্যান্য AJAX লাইব্রেরি (যেমন, Axios) ব্যবহার করে API কল করতে পারেন। এর মাধ্যমে ডেটা ফেচ করে UI আপডেট করা যাবে।

এখানে, আমরা API কল এবং AJAX requests এর ব্যবস্থাপনা দেখাবো Riot.js-এ।

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

JavaScript এর fetch API একটি সমর্থিত পদ্ধতি যা আপনাকে সার্ভার থেকে ডেটা গ্রহণ করতে সহায়তা করে। Riot.js এর মধ্যে এই fetch API ব্যবহার করা সহজ এবং রিয়েকটিভ ডাটা বাইন্ডিংয়ের মাধ্যমে UI আপডেট করা যায়।

উদাহরণ: API থেকে ডেটা ফেচ করা

<!-- DataComponent.riot -->
<data-component>
  <h1>Fetched Data</h1>
  <ul>
    <li each={item in items}>{item.name}</li>
  </ul>

  <script>
    export default {
      onMounted() {
        // API থেকে ডেটা ফেচ করা
        fetch('https://jsonplaceholder.typicode.com/users')
          .then(response => response.json())  // JSON রেসপন্সে রূপান্তর করা
          .then(data => {
            // ডেটা পাওয়ার পরে, এটি কম্পোনেন্টে সেট করা
            this.items = data;
          })
          .catch(error => {
            console.error('Error fetching data:', error);
          });
      }
    }
  </script>
</data-component>

ব্যাখ্যা:

• fetch API: API থেকে ডেটা ফেচ করার জন্য এটি ব্যবহার করা হয়। এখানে, আমরা https://jsonplaceholder.typicode.com/users URL থেকে ডেটা পাচ্ছি।
• response.json(): ফেচ রেসপন্সের JSON ডেটাতে রূপান্তর করা।
• ডাটা বাইন্ডিং: this.items এ ডেটা আসলে, তা স্বয়ংক্রিয়ভাবে UI-তে রেন্ডার হয়ে যাবে।

২. axios ব্যবহার করে API কল করা

এছাড়া, আপনি axios নামক জনপ্রিয় AJAX লাইব্রেরি ব্যবহার করেও API কল করতে পারেন। এটি প্রমিস এবং আরও উন্নত ফিচার সরবরাহ করে।

Step 1: Axios ইনস্টল করা

আপনি প্রথমে axios ইনস্টল করতে হবে:

npm install axios

Step 2: Axios দিয়ে API কল করা

<!-- DataComponentWithAxios.riot -->
<data-component-with-axios>
  <h1>Fetched Data using Axios</h1>
  <ul>
    <li each={item in items}>{item.name}</li>
  </ul>

  <script>
    import axios from 'axios';

    export default {
      onMounted() {
        // Axios দিয়ে API কল করা
        axios.get('https://jsonplaceholder.typicode.com/users')
          .then(response => {
            // ডেটা পাওয়ার পরে, এটি কম্পোনেন্টে সেট করা
            this.items = response.data;
          })
          .catch(error => {
            console.error('Error fetching data:', error);
          });
      }
    }
  </script>
</data-component-with-axios>

ব্যাখ্যা:

• axios.get(): এখানে axios ব্যবহার করে API থেকে GET রিকোয়েস্ট পাঠানো হচ্ছে। আপনি এই মেথডে URL প্রদান করে সার্ভার থেকে ডেটা নিয়ে আসতে পারেন।
• response.data: রেসপন্সের ডেটাকে response.data থেকে পাওয়া যাবে।
• ডাটা বাইন্ডিং: this.items এ ডেটা আসলে, তা স্বয়ংক্রিয়ভাবে UI-তে রেন্ডার হয়ে যাবে।

৩. API কলের জন্য Error Handling এবং Loading State

আপনি যখন API কল করেন, তখন Error Handling এবং Loading State খুবই গুরুত্বপূর্ণ। এটি ব্যবহারকারীদের ভালো অভিজ্ঞতা প্রদান করতে সহায়তা করে।

উদাহরণ: Error Handling এবং Loading State

<!-- DataComponentWithLoading.riot -->
<data-component-with-loading>
  <h1>Fetched Data</h1>

  <div if={loading}>Loading...</div>
  <div if={!loading && error}>Error loading data: {error}</div>
  
  <ul if={!loading && !error}>
    <li each={item in items}>{item.name}</li>
  </ul>

  <script>
    export default {
      onMounted() {
        this.loading = true;
        this.error = null;
        
        fetch('https://jsonplaceholder.typicode.com/users')
          .then(response => response.json())
          .then(data => {
            this.items = data;
            this.loading = false;
          })
          .catch(error => {
            console.error('Error fetching data:', error);
            this.error = error.message;
            this.loading = false;
          });
      }
    }
  </script>
</data-component-with-loading>

ব্যাখ্যা:

• loading স্টেট: যখন ডেটা ফেচ হচ্ছে, তখন loading স্টেট true থাকে এবং "Loading..." দেখানো হয়।
• error স্টেট: যদি API কলের সময় কোনো সমস্যা হয়, তাহলে error স্টেট সেট করা হয় এবং তাতে ত্রুটির বার্তা দেখানো হয়।
• Conditional Rendering: if={loading}, if={!loading && error}, এবং if={!loading && !error}-এর মাধ্যমে লোডিং, ত্রুটি, এবং ডেটা শো করা হয়।

৪. POST, PUT, DELETE রিকোয়েস্ট

API কলের মাধ্যমে শুধু ডেটা নেওয়া নয়, আপনি POST, PUT, এবং DELETE রিকোয়েস্টও পাঠাতে পারেন।

উদাহরণ: POST রিকোয়েস্ট (ডেটা সাবমিট)

<!-- PostDataComponent.riot -->
<post-data-component>
  <h1>Submit Data</h1>
  <input type="text" ref="name" placeholder="Enter Name"/>
  <button onclick={submitData}>Submit</button>

  <script>
    import axios from 'axios';

    export default {
      submitData() {
        const name = this.refs.name.value;
        
        axios.post('https://jsonplaceholder.typicode.com/users', { name })
          .then(response => {
            console.log('Data submitted:', response.data);
          })
          .catch(error => {
            console.error('Error submitting data:', error);
          });
      }
    }
  </script>
</post-data-component>

ব্যাখ্যা:

• POST রিকোয়েস্ট: axios.post() ব্যবহার করে সার্ভারে ডেটা পাঠানো হচ্ছে। এখানে একটি নাম ইনপুট ফিল্ড থেকে ডেটা নেওয়া হয়েছে এবং এটি API-তে সাবমিট করা হয়েছে।

Riot.js-এ API এবং AJAX requests ব্যবস্থাপনা খুবই সহজ। আপনি fetch API অথবা axios লাইব্রেরি ব্যবহার করে API কল করতে পারেন এবং এর মাধ্যমে ডেটা ফেচ করে UI আপডেট করতে পারেন। এছাড়াও, Error Handling এবং Loading States ব্যবহার করে ইউজার ইন্টারফেস আরও উন্নত করা যায়।

Riot.js এ AJAX রিকোয়েস্ট করার জন্য আপনি সাধারণ JavaScript এর fetch API বা পুরোনো XMLHttpRequest ব্যবহার করতে পারেন। Riot.js 자체 কোনো AJAX লাইব্রেরি অন্তর্ভুক্ত করে না, তবে এটি JavaScript এর অন্যান্য টুলগুলোর সাথে একত্রে কাজ করতে পারে।

১. fetch API ব্যবহার করে AJAX রিকোয়েস্ট

fetch API হল একটি আধুনিক এবং সহজ পদ্ধতি HTTP রিকোয়েস্ট করার জন্য, এবং এটি সাধারণত পছন্দ করা হয় কারণ এটি প্রমিজ (Promise) ভিত্তিক এবং এর সিনট্যাক্স খুবই পরিষ্কার।

Example: Using fetch for AJAX Request in Riot.js

<!-- AjaxRequest.riot -->
<ajax-request>
  <h2>Data from API</h2>

  <button onclick={loadData}>Load Data</button>
  
  <div if={loading}>Loading...</div>
  <div if={error}>Error: {error}</div>
  <ul if={data.length}>
    <li each={item in data}>{item.name}</li>
  </ul>

  <script>
    export default {
      data: [],
      loading: false,
      error: '',

      // ডাটা লোড করার ফাংশন
      loadData() {
        this.loading = true;
        this.error = ''; // পূর্বের ত্রুটি মুছে ফেলুন
        fetch('https://jsonplaceholder.typicode.com/users')
          .then(response => response.json())  // JSON রেসপন্সে রূপান্তরিত করা
          .then(json => {
            this.data = json;  // ডাটা কম্পোনেন্টের স্টেটে সেট করা
            this.loading = false;  // লোডিং স্টেট বন্ধ করা
          })
          .catch(err => {
            this.error = 'Failed to load data';  // ত্রুটি মেসেজ সেট করা
            this.loading = false;
          });
      }
    }
  </script>
</ajax-request>

এখানে:

• loadData: এটি fetch এর মাধ্যমে API থেকে ডাটা নিয়ে আসে। রিকোয়েস্টের আগে loading স্টেট true করা হয় এবং ডাটা আসলে false করা হয়।
• .then(response => response.json()): JSON রেসপন্সে রূপান্তরিত করা।
• .catch(err => {...}): কোনো ত্রুটি হলে, সেই ত্রুটির মেসেজটি error স্টেটে সংরক্ষণ করা হয়।
• <ul>: ডাটা লোড হয়ে গেলে, data অ্যারে থেকে আইটেমগুলো লিস্ট হিসেবে প্রদর্শন করা হয়।

২. XMLHttpRequest ব্যবহার করে AJAX রিকোয়েস্ট

যদিও fetch API আধুনিক এবং সহজ, তবে কিছু পুরোনো ব্রাউজারে XMLHttpRequest ব্যবহার করতে হতে পারে। এটি callback ভিত্তিক এবং কিছুটা পুরোনো পদ্ধতি।

Example: Using XMLHttpRequest for AJAX Request in Riot.js

<!-- AjaxRequestXMLHttpRequest.riot -->
<ajax-request>
  <h2>Data from API</h2>

  <button onclick={loadData}>Load Data</button>
  
  <div if={loading}>Loading...</div>
  <div if={error}>Error: {error}</div>
  <ul if={data.length}>
    <li each={item in data}>{item.name}</li>
  </ul>

  <script>
    export default {
      data: [],
      loading: false,
      error: '',

      loadData() {
        this.loading = true;
        this.error = ''; // পূর্বের ত্রুটি মুছে ফেলুন
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পন্ন হয়েছে
            if (xhr.status === 200) { // সফল রিকোয়েস্ট
              this.data = JSON.parse(xhr.responseText); // JSON রেসপন্সে রূপান্তরিত করা
              this.loading = false;
            } else { // ত্রুটি
              this.error = 'Failed to load data';
              this.loading = false;
            }
          }
        };
        xhr.send();
      }
    }
  </script>
</ajax-request>

এখানে:

• XMLHttpRequest: GET রিকোয়েস্ট করার জন্য এটি ব্যবহার করা হচ্ছে।
• xhr.onreadystatechange: রিকোয়েস্টের স্টেট চেক করা হচ্ছে। যখন রিকোয়েস্ট সম্পন্ন হয় (readyState === 4), তখন রেসপন্সের স্ট্যাটাস চেক করে data আপডেট করা হয়।

৩. AJAX রিকোয়েস্টে POST পদ্ধতি ব্যবহার

POST রিকোয়েস্টের জন্যও আপনি একইভাবে fetch API ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হয়েছে যেখানে একটি ফর্মের মাধ্যমে ডাটা API-তে পাঠানো হচ্ছে।

Example: Sending Data with POST using fetch

<!-- PostData.riot -->
<post-data>
  <h2>Submit Data</h2>

  <form onsubmit={submitForm}>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" ref={nameInput} />
    </div>
    <button type="submit">Submit</button>
  </form>

  <div if={loading}>Submitting...</div>
  <div if={error}>Error: {error}</div>
  <div if={message}>Message: {message}</div>

  <script>
    export default {
      name: '',
      loading: false,
      error: '',
      message: '',

      submitForm(e) {
        e.preventDefault(); // ফর্মের ডিফল্ট সাবমিট প্রক্রিয়া বন্ধ
        const name = this.refs.nameInput.value;
        
        if (!name) {
          this.error = 'Name is required!';
          return;
        }

        this.loading = true;
        this.error = '';
        const data = { name: name };
        
        fetch('https://jsonplaceholder.typicode.com/posts', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data),
        })
          .then(response => response.json())
          .then(json => {
            this.message = 'Data submitted successfully!';
            this.loading = false;
          })
          .catch(err => {
            this.error = 'Failed to submit data';
            this.loading = false;
          });
      }
    }
  </script>
</post-data>

এখানে:

• fetch POST রিকোয়েস্ট: POST রিকোয়েস্টে ডাটা পাঠানোর জন্য method: 'POST' এবং body: JSON.stringify(data) ব্যবহার করা হয়েছে।
• ফর্ম সাবমিট করা: ফর্মের ইনপুট থেকে ডাটা নিয়ে সেটি API-তে পাঠানো হচ্ছে এবং রেসপন্স অনুযায়ী স্টেট আপডেট হচ্ছে।

৪. Axios ব্যবহার করা (ঐচ্ছিক)

আপনি চাইলে Axios লাইব্রেরি ব্যবহার করতে পারেন, যা fetch API এর চেয়ে আরো সহজ এবং বহুমুখী। Axios ব্যবহার করলে আপনি আরও সহজভাবে HTTP রিকোয়েস্ট ম্যানেজ করতে পারবেন।

Example: Using Axios for AJAX Request

<!-- AxiosRequest.riot -->
<axios-request>
  <h2>Data from API with Axios</h2>

  <button onclick={loadData}>Load Data</button>

  <div if={loading}>Loading...</div>
  <div if={error}>Error: {error}</div>
  <ul if={data.length}>
    <li each={item in data}>{item.name}</li>
  </ul>

  <script>
    import axios from 'axios';

    export default {
      data: [],
      loading: false,
      error: '',

      loadData() {
        this.loading = true;
        this.error = ''; // পূর্বের ত্রুটি মুছে ফেলুন
        axios.get('https://jsonplaceholder.typicode.com/users')
          .then(response => {
            this.data = response.data;  // ডাটা কম্পোনেন্টের স্টেটে সেট করা
            this.loading = false;  // লোডিং স্টেট বন্ধ করা
          })
          .catch(err => {
            this.error = 'Failed to load data';  // ত্রুটি মেসেজ
            this.loading = false;
          });
      }
    }
  </script>
</axios-request>

এখানে, Axios দিয়ে API রিকোয়েস্ট করা হয়েছে এবং রেসপন্স পাওয়ার পর UI আপডেট করা হয়েছে।

সারাংশ

Riot.js তে AJAX রিকোয়েস্ট করার জন্য আপনি সহজভাবে JavaScript এর fetch API, XMLHttpRequest, অথবা Axios ব্যবহার করতে পারেন। এইভাবে, আপনি সহজেই API রিকোয়েস্ট করতে পারেন, ডাটা লোড বা পাঠাতে পারেন এবং UI রিফ্রেশ করতে পারেন।

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 তে স্বয়ংক্রিয়ভাবে আপডেট হয়, যা আপনার ডেভেলপমেন্ট প্রক্রিয়াকে আরও দ্রুত এবং কার্যকরী করে তোলে।

Riot.js-এ Asynchronous Data Binding ব্যবস্থাপনা করা হয় খুবই সহজ এবং প্রাকৃতিকভাবে, কারণ Riot.js এর রিয়ারেকটিভ ডাটা বাইন্ডিং ব্যবহারকারীর ডেটা আপডেট হওয়ার সাথে সাথে UI আপডেট করতে সাহায্য করে। যখন ডেটা আসিঙ্ক্রোনাসভাবে (যেমন একটি API কল বা ডাটাবেস থেকে) লোড হয়, Riot.js সেই ডেটা UI তে স্বয়ংক্রিয়ভাবে রেন্ডার করতে পারে।

Asynchronous Data Binding এর সাথে Riot.js ব্যবহার:

ধরা যাক, আপনি একটি অ্যাপ্লিকেশন তৈরি করছেন যেখানে ইউজারের ডেটা একটি API থেকে আসবে, এবং সেই ডেটার উপর ভিত্তি করে UI আপডেট হবে। Riot.js আপনাকে এই ডেটার সাথে সরাসরি বাইন্ডিং করতে সক্ষম করবে, তাই ডেটা লোড হওয়ার সাথে সাথে UI আপডেট হবে।

উদাহরণ: API থেকে ডেটা লোড করা

আমরা একটি API থেকে ইউজার ডেটা ফেচ করবো এবং সেই ডেটা টেমপ্লেটে বাইন্ড করব।

<!-- UserProfile.riot -->
<user-profile>
  <h2>{user.name}</h2>
  <p>{user.email}</p>
  
  <script>
    export default {
      onMounted() {
        this.user = { name: "Loading...", email: "" };  // Initial state

        // Asynchronous data fetch (simulating with setTimeout)
        setTimeout(() => {
          this.user = {
            name: "John Doe",
            email: "johndoe@example.com"
          };
        }, 2000);  // Simulate a delay of 2 seconds
      }
    }
  </script>

  <style>
    h2 {
      color: #4CAF50;
    }
    p {
      color: #555;
    }
  </style>
</user-profile>

ব্যাখ্যা:

1. Initial State: যখন কম্পোনেন্টটি মাউন্ট হয়, তখন আমরা user নামক একটি অবজেক্ট তৈরি করেছি যেটির মান প্রাথমিকভাবে { name: "Loading...", email: "" }।
2. Asynchronous Data Fetch: আমরা এখানে setTimeout ব্যবহার করে আসিঙ্ক্রোনাস ডেটা লোড করেছি। এটি 2 সেকেন্ড পর this.user ডেটাটি আপডেট করবে এবং UI তে নাম এবং ইমেইল দেখাবে।
3. Data Binding: {user.name} এবং {user.email} ডাটা বাইন্ডিং ব্যবহার করা হয়েছে, যার মাধ্যমে UI তে ডেটার পরিবর্তন স্বয়ংক্রিয়ভাবে দেখানো হবে।

আসিঙ্ক্রোনাস ডেটা ফেচ করার জন্য অন্যান্য পদ্ধতি:

1. Fetch API ব্যবহার করে ডেটা লোড করা:

<!-- UserProfileWithAPI.riot -->
<user-profile>
  <h2>{user.name}</h2>
  <p>{user.email}</p>
  
  <script>
    export default {
      onMounted() {
        this.user = { name: "Loading...", email: "" };  // Initial state

        // Fetch data from an API
        fetch('https://jsonplaceholder.typicode.com/users/1')
          .then(response => response.json())
          .then(data => {
            this.user = {
              name: data.name,
              email: data.email
            };
          });
      }
    }
  </script>

  <style>
    h2 {
      color: #4CAF50;
    }
    p {
      color: #555;
    }
  </style>
</user-profile>

এখানে, আমরা fetch() ব্যবহার করে একটি API থেকে ডেটা ফেচ করছি এবং ডেটা লোড হওয়ার পর this.user আপডেট করছি। Riot.js ডেটা পরিবর্তন হওয়া সাথে সাথে UI আপডেট করবে।

Riot.js এর রিয়ারেকটিভ ডাটা বাইন্ডিং:

Riot.js এর ডাটা বাইন্ডিং খুবই সহজ এবং শক্তিশালী। যখনই আপনি কোনও ডেটা পরিবর্তন করবেন, Riot.js স্বয়ংক্রিয়ভাবে DOM আপডেট করবে। যদি ডেটা আসিঙ্ক্রোনাসভাবে লোড হয়, তখন UI আপডেট হবে যখন ডেটা সম্পূর্ণভাবে লোড হবে।

কিছু অতিরিক্ত পদ্ধতি:

1. Async/Await ব্যবহার করা: আপনি async এবং await এর মাধ্যমে আরও পরিষ্কার এবং সহজভাবে আসিঙ্ক্রোনাস ডেটা ফেচ করতে পারেন।

<!-- UserProfileWithAsync.riot -->
<user-profile>
  <h2>{user.name}</h2>
  <p>{user.email}</p>
  
  <script>
    export default {
      async onMounted() {
        this.user = { name: "Loading...", email: "" };  // Initial state

        // Asynchronous data fetch using async/await
        const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
        const data = await response.json();
        
        this.user = {
          name: data.name,
          email: data.email
        };
      }
    }
  </script>

  <style>
    h2 {
      color: #4CAF50;
    }
    p {
      color: #555;
    }
  </style>
</user-profile>

এখানে, আমরা async এবং await ব্যবহার করে API থেকে ডেটা লোড করেছি, যা কোডটিকে আরও পরিষ্কার এবং পাঠযোগ্য করে তোলে।

সারাংশ:

• Asynchronous Data Binding Riot.js এ খুব সহজ এবং স্বয়ংক্রিয়ভাবে কাজ করে। যখন আপনি আসিঙ্ক্রোনাস ডেটা লোড করবেন, Riot.js ডেটা পরিবর্তন হলে UI আপডেট করবে।
• Fetch API, async/await, বা setTimeout ইত্যাদি ব্যবহার করে আপনি ডেটা লোড এবং আপডেট করতে পারেন।
• Riot.js এর রিয়ারেকটিভ ডাটা বাইন্ডিং এই কাজটি অনেক সহজ এবং কার্যকরী করে তোলে।

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 কলের সময় লোডিং অবস্থায় থাকা এবং রেসপন্স পাওয়ার পর লোডিং বন্ধ করা হয়।