Remote API এর সাথে কাজ করা (GET, POST, PUT, DELETE)

Aurelia ফ্রেমওয়ার্কে Remote API এর সাথে কাজ করার জন্য আপনি HTTP অনুরোধ (Requests) পাঠানোর জন্য Fetch API বা Aurelia HTTP Client ব্যবহার করতে পারেন। এই টিউটোরিয়ালে আমরা GET, POST, PUT, এবং DELETE রিকোয়েস্টগুলি পাঠানোর জন্য Aurelia এর HttpClient ক্লাস ব্যবহার করার পদ্ধতি দেখাবো।

১. Aurelia HTTP Client সেটআপ

Aurelia প্রজেক্টে HttpClient ব্যবহার করতে প্রথমে HttpClient ক্লাস ইনপোর্ট করতে হবে এবং সেটি ইনজেক্ট করতে হবে।

HttpClient ইনপোর্ট এবং সেটআপ

আপনার কম্পোনেন্ট বা সার্ভিস ফাইলে প্রথমে HttpClient ইনপোর্ট করুন:

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

export class ApiService {
  constructor() {
    this.httpClient = new HttpClient();
  }
}

এখন আপনি HttpClient ব্যবহার করে API রিকোয়েস্ট পাঠাতে পারবেন।

২. GET রিকোয়েস্ট

GET রিকোয়েস্ট সাধারণত সার্ভার থেকে ডেটা নিয়ে আসার জন্য ব্যবহার করা হয়।

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

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

export class ApiService {
  constructor() {
    this.httpClient = new HttpClient();
  }

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

এখানে GET রিকোয়েস্ট ব্যবহার করে https://jsonplaceholder.typicode.com/posts URL থেকে ডেটা আনা হয়েছে এবং সেটি কনসোলে প্রদর্শিত হচ্ছে।

৩. POST রিকোয়েস্ট

POST রিকোয়েস্ট সাধারণত সার্ভারে নতুন ডেটা পাঠানোর জন্য ব্যবহৃত হয়।

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

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

export class ApiService {
  constructor() {
    this.httpClient = new HttpClient();
  }

  postData() {
    const postData = {
      title: 'foo',
      body: 'bar',
      userId: 1
    };

    this.httpClient.fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify(postData),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(response => response.json())
    .then(data => {
      console.log('Data sent:', data);
    })
    .catch(error => console.error('Error:', error));
  }
}

এখানে POST রিকোয়েস্টে ডেটা (title, body, userId) সার্ভারে পাঠানো হচ্ছে এবং সার্ভার থেকে রেসপন্স আসলে সেটি কনসোলে প্রদর্শিত হচ্ছে।

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

PUT রিকোয়েস্ট সাধারণত সার্ভারে ইতিমধ্যে থাকা ডেটা আপডেট করতে ব্যবহার করা হয়।

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

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

export class ApiService {
  constructor() {
    this.httpClient = new HttpClient();
  }

  putData() {
    const updatedData = {
      id: 1,
      title: 'foo updated',
      body: 'bar updated',
      userId: 1
    };

    this.httpClient.fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'PUT',
      body: JSON.stringify(updatedData),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(response => response.json())
    .then(data => {
      console.log('Updated data:', data);
    })
    .catch(error => console.error('Error:', error));
  }
}

এখানে PUT রিকোয়েস্ট ব্যবহার করে https://jsonplaceholder.typicode.com/posts/1 URL-এ থাকা প্রথম পোস্টটি আপডেট করা হয়েছে এবং আপডেট হওয়া ডেটা কনসোলে প্রদর্শিত হচ্ছে।

৫. DELETE রিকোয়েস্ট

DELETE রিকোয়েস্ট সাধারণত সার্ভার থেকে কোনো রিসোর্স বা ডেটা মুছে ফেলতে ব্যবহার করা হয়।

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

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

export class ApiService {
  constructor() {
    this.httpClient = new HttpClient();
  }

  deleteData() {
    this.httpClient.fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'DELETE'
    })
    .then(response => {
      if (response.ok) {
        console.log('Post deleted');
      } else {
        console.error('Failed to delete');
      }
    })
    .catch(error => console.error('Error:', error));
  }
}

এখানে DELETE রিকোয়েস্ট ব্যবহার করে https://jsonplaceholder.typicode.com/posts/1 URL থেকে প্রথম পোস্টটি ডিলিট করা হচ্ছে।

৬. Aurelia HttpClient এর সাথে কাস্টম হেডার এবং অন্যান্য অপশন

Aurelia HttpClient-এ আপনি কাস্টম হেডার এবং অন্যান্য অপশন ব্যবহার করতে পারেন, যেমন অটেনটিকেশন টোকেন বা অন্যান্য কাস্টম হেডার যুক্ত করা।

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

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

export class ApiService {
  constructor() {
    this.httpClient = new HttpClient();
  }

  postDataWithAuth() {
    const postData = {
      title: 'foo',
      body: 'bar',
      userId: 1
    };

    this.httpClient.fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify(postData),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-auth-token'
      }
    })
    .then(response => response.json())
    .then(data => {
      console.log('Data sent with auth:', data);
    })
    .catch(error => console.error('Error:', error));
  }
}

এখানে, Authorization হেডার দিয়ে একটি Bearer token পাঠানো হচ্ছে।

উপসংহার

Aurelia এর HttpClient ব্যবহার করে আপনি সহজেই GET, POST, PUT, এবং DELETE রিকোয়েস্ট করতে পারেন এবং সার্ভারের সাথে ডেটা আদান-প্রদান করতে পারেন। এটি RESTful API ইন্টিগ্রেশন খুবই সহজ এবং শক্তিশালী করে তোলে। Aurelia এর এই সুবিধাগুলো ব্যবহার করে আপনি API-র সাথে একীভূত অ্যাপ্লিকেশন তৈরি করতে পারবেন যা ডাইনামিক ডেটা প্রসেস এবং ইন্টারঅ্যাকশন করবে।