Fetch API ব্যবহার করে ডেটা ফেচ করা

Ember.js অ্যাপ্লিকেশনে ডেটা ফেচ করতে সাধারণত Ember Data ব্যবহার করা হয়, তবে কখনও কখনও আপনি Fetch API ব্যবহার করতে পারেন, যা ব্রাউজারে বিল্ট-ইন একটি API এবং JSON ডেটা গ্রহণ এবং প্রেরণ করতে সহায়ক। Fetch API ব্যবহার করে Ember.js অ্যাপ্লিকেশন থেকে ডেটা ফেচ করার প্রক্রিয়া ব্যাখ্যা করা হচ্ছে।

Fetch API কি?

Fetch API হল একটি আধুনিক JavaScript API যা HTTP রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়। এটি XMLHttpRequest এর একটি উন্নত সংস্করণ, যা Promise-based এবং অ্যাসিনক্রোনাস (asynchronous) কাজ করে, যার মাধ্যমে আপনি সহজে ডেটা রিট্রিভ করতে পারেন। এটি সাধারণত API থেকে ডেটা ফেচ করতে ব্যবহৃত হয়।

Fetch API ব্যবহার করে ডেটা ফেচ করা

Ember.js অ্যাপ্লিকেশনে Fetch API ব্যবহার করে ডেটা ফেচ করতে, আপনাকে সাধারণ JavaScript সিনট্যাক্স ব্যবহার করতে হবে, যেহেতু Fetch API একটি সাধারণ JavaScript ফিচার। এটি অ্যাসিনক্রোনাস কাজ করে, তাই async/await সিনট্যাক্স ব্যবহার করে ডেটা ফেচ করা খুব সহজ।

ধরা যাক, আপনি একটি রেস্তোরাঁর তালিকা ফেচ করতে চান, যেখানে API এর URL https://api.example.com/restaurants।

উদাহরণ: Fetch API ব্যবহার করে ডেটা ফেচ করা

১. Service ফাইল তৈরি করা

প্রথমে একটি service ফাইল তৈরি করে API থেকে ডেটা ফেচ করা যাক। এতে আমরা fetch() ব্যবহার করব।

ember generate service restaurant

এটি app/services/restaurant.js ফাইল তৈরি করবে।

২. Service ফাইলে Fetch API ব্যবহার

app/services/restaurant.js ফাইলে Fetch API ব্যবহার করে ডেটা ফেচ করা হবে:

// app/services/restaurant.js
import Service from '@ember/service';

export default class RestaurantService extends Service {
  async getRestaurants() {
    try {
      let response = await fetch('https://api.example.com/restaurants');
      
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      let data = await response.json();
      return data; // JSON ডেটা ফেরত দেয়
    } catch (error) {
      console.error('Fetch error: ', error);
    }
  }
}

এখানে, getRestaurants() ফাংশনটি API থেকে রেস্তোরাঁর তালিকা ফেচ করবে। fetch() পদ্ধতি ব্যবহার করে রিকোয়েস্ট করা হয়েছে এবং রেসপন্স হিসাবে JSON ডেটা পাওয়া যাচ্ছে।

৩. Controller বা Component এ Service ব্যবহার

এখন, এই restaurant সার্ভিস ব্যবহার করতে হবে যেখানে আপনি ডেটা ফেচ করতে চান। এটি সাধারণত controller বা component-এ ব্যবহার করা হয়।

// app/controllers/application.js
import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  restaurants = [];

  async model() {
    // restaurant সার্ভিস থেকে ডেটা ফেচ
    this.restaurants = await this.restaurant.getRestaurants();
  }
}

এখানে restaurant.getRestaurants() কল করা হচ্ছে এবং ডেটা restaurants অ্যারে হিসেবে অ্যাসাইন করা হচ্ছে।

৪. Template এ ডেটা রেন্ডার

এখন, restaurants ডেটা application.hbs টেমপ্লেটে রেন্ডার করা হবে:

<!-- app/templates/application.hbs -->
<h1>Restaurant List</h1>
<ul>
  {{#each this.restaurants as |restaurant|}}
    <li>{{restaurant.name}} - {{restaurant.cuisine}}</li>
  {{/each}}
</ul>

এখানে, each হেল্পার ব্যবহার করে সমস্ত রেস্তোরাঁের নাম এবং খাবারের ধরণ প্রদর্শন করা হচ্ছে।

Fetch API এবং Error Handling

Fetch API ব্যবহার করার সময় Error Handling খুব গুরুত্বপূর্ণ। যেমন উল্লিখিত উদাহরণে, আমরা response.ok চেক করেছি, যা HTTP স্ট্যাটাস কোড 200 (OK) হলে true রিটার্ন করে। যদি কিছু ভুল হয়, তবে catch() ব্লকটি কল হবে এবং ত্রুটি মেসেজ কনসোলে প্রদর্শিত হবে।

এছাড়া, আপনি try/catch ব্যবহার করে asynchronous errors ম্যানেজ করতে পারেন।

Fetch API ব্যবহার করে Ember.js অ্যাপ্লিকেশন থেকে ডেটা ফেচ করা বেশ সহজ এবং কার্যকরী। আপনি যখন Ember Data ব্যবহার করতে চান না অথবা কাস্টম API কল করতে চান, তখন Fetch API একটি ভালো বিকল্প। এখানে ব্যবহৃত async/await সিনট্যাক্স এবং try/catch ব্লক ডেটা ফেচিং এবং ত্রুটি ব্যবস্থাপনা সহজ করে তোলে।

Ember.js এবং Fetch API এর সংমিশ্রণ অ্যাপ্লিকেশন ডেভেলপমেন্টে উন্নত পারফরম্যান্স এবং আরও অনেক কাস্টমাইজেশনের সুযোগ দেয়।