ফেচ ক্লায়েন্ট এবং AJAX রিকোয়েস্ট

Aurelia ফ্রেমওয়ার্কে AJAX রিকোয়েস্ট এবং ফেচ ক্লায়েন্ট ব্যবহার করা খুবই সহজ এবং কার্যকর। AJAX (Asynchronous JavaScript and XML) হলো একটি প্রযুক্তি যা ওয়েব পেজের ব্যাকগ্রাউন্ডে সার্ভারের সাথে যোগাযোগ করতে সাহায্য করে এবং পেজটি পুনরায় লোড না করেই ডেটা আপডেট করতে সক্ষম করে।

Aurelia, JavaScript ফেচ API এবং অন্যান্য AJAX টুলগুলির মাধ্যমে সহজেই HTTP রিকোয়েস্ট করতে সক্ষম। নিচে Aurelia-তে ফেচ ক্লায়েন্ট ব্যবহার করে AJAX রিকোয়েস্ট করার একটি বিস্তারিত গাইড দেওয়া হলো।

ফেচ API ব্যবহার করে AJAX রিকোয়েস্ট করা

Aurelia ফ্রেমওয়ার্কে ফেচ API ব্যবহার করা একটি সাধারণ এবং আধুনিক পদ্ধতি। ফেচ ক্লায়েন্ট সরাসরি HTTP রিকোয়েস্ট করতে সাহায্য করে এবং এর মাধ্যমে আপনি RESTful API এর সাথে ইন্টারঅ্যাক্ট করতে পারেন।

১. ফেচ API ব্যবহার করার জন্য একটি ফাংশন তৈরি করা

Aurelia অ্যাপ্লিকেশনে API থেকে ডেটা ফেচ করতে, আপনি সাধারণত fetch ফাংশন ব্যবহার করবেন।

উদাহরণ: GET রিকোয়েস্ট

export class App {
  data = [];

  activate() {
    fetch('https://jsonplaceholder.typicode.com/posts')  // API URL
      .then(response => response.json())  // JSON রেসপন্স গ্রহণ
      .then(data => {
        this.data = data;  // ডেটা প্রক্রিয়াকরণ
      })
      .catch(error => console.log('Error fetching data: ', error));  // এরর হ্যান্ডলিং
  }
}

এখানে, fetch ফাংশন ব্যবহার করা হয়েছে যা API থেকে ডেটা আনে এবং .then() এর মাধ্যমে JSON ডেটা প্রসেস করে this.data এ সেট করে।

HTML টেমপ্লেট:

<template>
  <h2>Fetched Data</h2>
  <ul>
    <li repeat.for="item of data">${item.title}</li>  <!-- ডেটা প্রদর্শন -->
  </ul>
</template>

এখানে, repeat.for="item of data" দ্বারা ডেটার প্রতিটি আইটেমের জন্য একটি <li> তৈরি হবে এবং এর মধ্যে item.title প্রদর্শিত হবে।

২. POST রিকোয়েস্ট পাঠানো

ফেচ ক্লায়েন্ট শুধুমাত্র GET রিকোয়েস্টের জন্য নয়, POST রিকোয়েস্টের জন্যও ব্যবহার করা যায়। এটি ব্যবহারকারী ইনপুট বা ফর্মের মাধ্যমে ডেটা পাঠাতে সাহায্য করে।

উদাহরণ: POST রিকোয়েস্ট

export class App {
  message = '';
  
  submitForm() {
    const data = {
      title: 'My Post',
      body: 'This is the body of the post',
      userId: 1
    };

    fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)  // ডেটা JSON ফরম্যাটে রূপান্তর
    })
    .then(response => response.json())  // রেসপন্স JSON ফরম্যাটে
    .then(json => {
      this.message = 'Post successfully created!';
    })
    .catch(error => console.log('Error posting data: ', error));  // এরর হ্যান্ডলিং
  }
}

HTML টেমপ্লেট:

<template>
  <button click.delegate="submitForm()">Submit Post</button>
  <p>${message}</p>  <!-- রেসপন্স মেসেজ -->
</template>

এখানে, submitForm() ফাংশনটি POST রিকোয়েস্ট পাঠাচ্ছে এবং API থেকে রেসপন্স পাওয়ার পর একটি মেসেজ দেখাচ্ছে।

৩. AJAX রিকোয়েস্টে Headers ব্যবহার

কিছু API রিকোয়েস্টে Authorization বা অন্য কোনো বিশেষ header পাঠাতে হতে পারে। এটি fetch এর মাধ্যমে খুব সহজেই করা যায়।

উদাহরণ: Headers সহ GET রিকোয়েস্ট

export class App {
  data = [];

  activate() {
    const headers = new Headers();
    headers.append("Authorization", "Bearer token_value");

    fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'GET',
      headers: headers  // Headers যোগ করা হচ্ছে
    })
    .then(response => response.json())
    .then(data => {
      this.data = data;
    })
    .catch(error => console.log('Error fetching data: ', error));
  }
}

এখানে, headers.append() মেথড দিয়ে Authorization হেডার পাঠানো হয়েছে।

Aurelia HttpClient ব্যবহার করে AJAX রিকোয়েস্ট

Aurelia তে একটি বিল্ট-ইন HttpClient ক্লাস রয়েছে যা আরও উন্নত HTTP রিকোয়েস্ট ফিচার প্রদান করে। এটি অ্যাপ্লিকেশনের জন্য ব্যবহারকারী HTTP রিকোয়েস্ট প্রক্রিয়াটি সহজ করে তোলে এবং মেথডগুলো যেমন GET, POST, PUT, DELETE, ইত্যাদি সাপোর্ট করে।

১. HttpClient ইনজেক্ট করা

Aurelia অ্যাপ্লিকেশনে HttpClient ইনজেক্ট করতে আপনাকে Dependency Injection ব্যবহার করতে হবে।

import {HttpClient} from 'aurelia-fetch-client';

export class App {
  data = [];

  constructor(http) {
    this.http = http;  // HttpClient ইনজেক্ট করা হচ্ছে
  }

  activate() {
    this.http.fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => {
        this.data = data;
      })
      .catch(error => console.log('Error fetching data: ', error));
  }
}

২. POST রিকোয়েস্ট HttpClient এর মাধ্যমে

Aurelia HttpClient এর মাধ্যমে POST রিকোয়েস্ট করার জন্য:

import {HttpClient} from 'aurelia-fetch-client';

export class App {
  message = '';

  constructor(http) {
    this.http = http;  // HttpClient ইনজেক্ট করা হচ্ছে
  }

  submitForm() {
    const data = {
      title: 'New Post',
      body: 'This is a new post',
      userId: 1
    };

    this.http.fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' }
    })
    .then(response => response.json())
    .then(json => {
      this.message = 'Post created successfully!';
    })
    .catch(error => console.log('Error posting data: ', error));
  }
}

উপসংহার

Aurelia তে AJAX রিকোয়েস্ট করার জন্য দুটি প্রধান পদ্ধতি ব্যবহার করা যায়: ফেচ API এবং HttpClient। ফেচ API ব্যবহার করা সহজ এবং আধুনিক পদ্ধতি হলেও, HttpClient আরও অনেক সুবিধা এবং অপশন প্রদান করে। HttpClient এমন অ্যাপ্লিকেশনগুলোর জন্য উপযুক্ত যেখানে উন্নত রিকোয়েস্ট কনফিগারেশন এবং নিরাপত্তা প্রয়োজন। এছাড়া, fetch API সরাসরি ব্রাউজারে কাজ করে এবং এটি প্রাথমিক অ্যাপ্লিকেশনগুলোর জন্য ভালো।