ajax() ফাংশনের মাধ্যমে API থেকে ডেটা ফেচ করা

RxJS একটি শক্তিশালী লাইব্রেরি যা অ্যাসিঙ্ক্রোনাস ডেটা প্রক্রিয়াকরণের জন্য ব্যবহৃত হয়। ajax() ফাংশনটি RxJS-এর একটি বিল্ট-ইন ফাংশন যা HTTP API থেকে ডেটা ফেচ করতে ব্যবহৃত হয়। এটি XMLHttpRequest বা fetch() API-এর পরিবর্তে RxJS-এর Observable ব্যবহার করে HTTP রিকোয়েস্ট পাঠানোর প্রক্রিয়া সহজ করে।

এই ফাংশনটি GET, POST, PUT, DELETE সহ অন্যান্য HTTP মেথড সমর্থন করে এবং Observable রিটার্ন করে, যা অ্যাসিঙ্ক্রোনাস রেসপন্সে সাবস্ক্রাইব করার সুযোগ দেয়।

ajax() ফাংশন কী?

ajax() ফাংশনটি RxJS-এর rxjs/ajax প্যাকেজের অংশ এবং এটি একটি Observable প্রদান করে যা HTTP রিকোয়েস্টে ব্যবহৃত হয়। এটি GET এবং অন্যান্য HTTP মেথড দিয়ে API থেকে ডেটা ফেচ করতে পারে।

এটি ডেটা পাঠানোর পর রেসপন্স হিসেবে একটি Observable প্রদান করে, যেটি আপনি .subscribe() দিয়ে প্রাপ্ত ডেটা প্রক্রিয়া করতে পারেন।

ajax() ফাংশনের সাইনাট

import { ajax } from 'rxjs/ajax';

ajax(url: string | Request, config?: { headers: any, body: any, method: string, responseType: string }): Observable

• url: API রিকোয়েস্টের ইউআরএল।
• config: (optional) অতিরিক্ত কনফিগারেশন, যেমন হেডার, বডি, HTTP মেথড এবং রেসপন্স টাইপ।

ajax() দিয়ে GET রিকোয়েস্ট পাঠানো

GET রিকোয়েস্ট পাঠানোর জন্য ajax() ব্যবহার করা যায়, যা API থেকে ডেটা নিয়ে আসে।

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

import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';

const apiUrl = 'https://jsonplaceholder.typicode.com/posts';

ajax.getJSON(apiUrl).pipe(
  map(response => console.log('API Response:', response))
).subscribe();

ব্যাখ্যা:

• এখানে, ajax.getJSON() ব্যবহার করে GET রিকোয়েস্ট পাঠানো হচ্ছে।
• এটি API থেকে JSON ফরম্যাটে ডেটা ফিরিয়ে আনবে এবং তারপর map() অপারেটরের মাধ্যমে রেসপন্সটি কনসোলে প্রিন্ট করবে।

আউটপুট:

API Response: [Array of posts from the API]

ajax() দিয়ে POST রিকোয়েস্ট পাঠানো

POST রিকোয়েস্ট দিয়ে API তে ডেটা পাঠানোর জন্য ajax() ব্যবহার করা যায়।

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

import { ajax } from 'rxjs/ajax';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

const apiUrl = 'https://jsonplaceholder.typicode.com/posts';

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

ajax.post(apiUrl, postData).pipe(
  catchError(error => {
    console.error('Error occurred:', error);
    return of('Error response');
  })
).subscribe({
  next: (response) => console.log('API Response:', response),
  error: (err) => console.error('Error:', err)
});

ব্যাখ্যা:

• এখানে, ajax.post() ব্যবহার করে POST রিকোয়েস্ট পাঠানো হচ্ছে যেখানে postData নামক JSON অবজেক্টটি API তে পাঠানো হচ্ছে।
• catchError() দিয়ে ত্রুটি হ্যান্ডলিং করা হচ্ছে, যদি কোনো সমস্যা হয়।

আউটপুট:

API Response: { id: 101, title: 'foo', body: 'bar', userId: 1 }

এখানে, API থেকে POST রিকোয়েস্টের রেসপন্স হিসেবে একটি JSON অবজেক্ট এসেছে।

ajax() ব্যবহার করে Error Handling

ajax() ফাংশনের মাধ্যমে ডেটা ফেচ করার সময় ত্রুটি (error) ঘটে যেতে পারে। তাই, আপনাকে ত্রুটি হ্যান্ডলিং করতে হবে যাতে আপনার অ্যাপ্লিকেশন স্থিতিশীল থাকে। আপনি catchError() অপারেটর ব্যবহার করে ত্রুটি হ্যান্ডল করতে পারেন।

উদাহরণ: Error Handling

import { ajax } from 'rxjs/ajax';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

const apiUrl = 'https://jsonplaceholder.typicode.com/posts/999';  // Invalid endpoint

ajax.getJSON(apiUrl).pipe(
  catchError(error => {
    console.error('API Error:', error);
    return of('Fallback data');
  })
).subscribe({
  next: (response) => console.log('API Response:', response),
  error: (err) => console.error('Error:', err)
});

ব্যাখ্যা:

• এখানে, ajax.getJSON() মাধ্যমে একটি GET রিকোয়েস্ট পাঠানো হয়েছে। যেহেতু এটি একটি ভুল API endpoint (যেখানে কোনো ডেটা নেই), catchError() ত্রুটির পরিস্থিতিতে fallback ডেটা প্রদান করবে।

আউটপুট:

API Error: Error: 404 Not Found
API Response: Fallback data

ajax() ব্যবহার করে Request Headers নির্ধারণ

যখন আপনাকে কিছু বিশেষ HTTP হেডার প্রদান করতে হয়, তখন ajax() ফাংশনের কনফিগারেশন অংশে headers এর মান সেট করা যায়।

উদাহরণ: Custom Headers

import { ajax } from 'rxjs/ajax';

const apiUrl = 'https://jsonplaceholder.typicode.com/posts';

const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer your-token-here'
};

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

ajax.post(apiUrl, postData, { headers }).subscribe({
  next: (response) => console.log('API Response:', response),
  error: (err) => console.error('Error:', err)
});

ব্যাখ্যা:

• এখানে, ajax.post() ফাংশনে headers কনফিগারেশন দেয়া হয়েছে, যার মাধ্যমে Authorization টোকেন এবং Content-Type নির্ধারণ করা হয়েছে।

সারাংশ

RxJS এর ajax() ফাংশনটি খুবই কার্যকরী যখন আপনি API থেকে ডেটা ফেচ করতে চান, বিশেষত অ্যাসিঙ্ক্রোনাস কাজের জন্য। আপনি GET, POST, PUT, DELETE সহ অন্যান্য HTTP মেথডের সাহায্যে ডেটা পাঠাতে এবং গ্রহণ করতে পারেন। এটি Observable প্রদান করে যা আপনি subscribe() মেথড দিয়ে পর্যবেক্ষণ করতে পারেন।

• ajax.getJSON(): JSON রেসপন্স নিয়ে আসার জন্য ব্যবহৃত হয়।
• ajax.post(): POST রিকোয়েস্টের মাধ্যমে ডেটা পাঠাতে ব্যবহৃত হয়।
• Error Handling: catchError() অপারেটর দিয়ে ত্রুটি হ্যান্ডলিং করা হয়।
• Custom Headers: রিকোয়েস্টের জন্য কাস্টম হেডার ব্যবহার করা যায়।

এই ফাংশনের মাধ্যমে API কল করা আরও সহজ এবং কার্যকরী হয়ে ওঠে।