RxJS এর মাধ্যমে HTTP Request করা

RxJS এবং HTTP Requests - আরএক্সজেএস (RxJS) - Web Development

447

RxJS (Reactive Extensions for JavaScript) একটি লাইব্রেরি যা অ্যাসিঙ্ক্রোনাস প্রোগ্রামিং এবং ডেটা স্ট্রিম ম্যানিপুলেশনের জন্য ব্যবহৃত হয়। এটি Observables এবং Operators ব্যবহার করে অ্যাসিঙ্ক্রোনাস ডেটা কার্যকরভাবে পরিচালনা করতে সহায়তা করে। RxJS সাধারণত ব্যবহার করা হয় বিভিন্ন অ্যাসিঙ্ক্রোনাস কাজের জন্য, যেমন HTTP রিকোয়েস্ট বা ডেটাবেস কুয়েরি। এখানে আমরা আলোচনা করবো কিভাবে RxJS ব্যবহার করে HTTP রিকোয়েস্ট করা যায়।

RxJS এর মাধ্যমে HTTP রিকোয়েস্ট করার জন্য ajax() বা HttpClient (Angular এর জন্য) ব্যবহৃত হতে পারে। তবে এখানে আমরা ajax() মেথড ব্যবহার করে HTTP রিকোয়েস্ট করার প্রক্রিয়া দেখাবো, যা RxJS-এর একটি বিল্ট-ইন অপারেটর।


RxJS এর ajax() মেথড

ajax() মেথড RxJS লাইব্রেরির একটি অংশ যা HTTP রিকোয়েস্ট তৈরি করতে এবং সেই রিকোয়েস্টের ফলাফল (response) রিটার্ন করতে ব্যবহৃত হয়। এটি সাধারণত HTTP GET, POST, PUT, DELETE রিকোয়েস্ট করতে ব্যবহৃত হয়।

ajax() এর সাইনাট

import { ajax } from 'rxjs/ajax';

ajax({
  url: 'https://api.example.com/data',
  method: 'GET', // GET, POST, PUT, DELETE
  headers: { 'Content-Type': 'application/json' },
  body: { key: 'value' } // POST অথবা PUT রিকোয়েস্টের জন্য
}).subscribe(response => {
  console.log('Response:', response);
});

এখানে:

  • url: API এর URL।
  • method: HTTP মেথড (GET, POST, PUT, DELETE)।
  • headers: রিকোয়েস্টের হেডারস।
  • body: POST অথবা PUT রিকোয়েস্টের জন্য ডেটা যা পাঠানো হবে।

HTTP GET রিকোয়েস্ট

HTTP GET রিকোয়েস্ট সাধারণত ডেটা পাওয়ার জন্য ব্যবহৃত হয়। এটি API এর থেকে ডেটা রিটার্ন করে। নিচে একটি উদাহরণ দেখানো হলো:

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

import { ajax } from 'rxjs/ajax';

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

ajax.getJSON(url).subscribe(response => {
  console.log('Received data:', response);
});

এখানে, getJSON() মেথডটি GET রিকোয়েস্ট পাঠিয়ে JSON ফরম্যাটে রেসপন্স পাবে এবং তা সাবস্ক্রাইবারে পাঠাবে। এইভাবে, আপনি JSON ডেটা API থেকে সহজে পেতে পারেন।

আউটপুট:

Received data: [array of posts data from API]

HTTP POST রিকোয়েস্ট

HTTP POST রিকোয়েস্ট ডেটা পাঠানোর জন্য ব্যবহৃত হয়। এটি সার্ভারে নতুন ডেটা তৈরি বা আপডেট করতে ব্যবহৃত হয়। নিচে POST রিকোয়েস্টের একটি উদাহরণ দেখানো হলো।

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

import { ajax } from 'rxjs/ajax';

const url = 'https://jsonplaceholder.typicode.com/posts';
const body = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

ajax.post(url, body, { 'Content-Type': 'application/json' }).subscribe(response => {
  console.log('Response from POST request:', response);
});

এখানে, ajax.post() মেথড ব্যবহার করে আমরা একটি POST রিকোয়েস্ট পাঠাচ্ছি এবং একটি JSON অবজেক্ট (body) পাঠাচ্ছি। রেসপন্স আসলে সেটি কনসোলে প্রিন্ট হবে।

আউটপুট:

Response from POST request: { ...response data from the API }

Error Handling with ajax()

RxJS এর ajax() মেথডে সাধারণত error handling করার জন্য .catch() বা .pipe() ব্যবহার করা হয়। যদি কোনো HTTP রিকোয়েস্টে ত্রুটি ঘটে, তখন তা catchError() অপারেটরের মাধ্যমে ধরা যেতে পারে।

উদাহরণ: Error Handling

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

const url = 'https://jsonplaceholder.typicode.com/invalidurl';

ajax.getJSON(url).pipe(
  catchError(error => {
    console.error('HTTP request error:', error);
    return [];
  })
).subscribe(response => {
  console.log('Response:', response);
});

এখানে, catchError() অপারেটরটি HTTP ত্রুটি (যেমন, নেটওয়ার্ক সমস্যা বা সার্ভার 404) হ্যান্ডল করার জন্য ব্যবহার করা হয়েছে। যদি কোনো ত্রুটি ঘটে, তবে [] (খালি অ্যারে) রিটার্ন হবে, যা পরে সাবস্ক্রাইবারে পাঠানো হবে।


RxJS এবং Angular HTTP Client

Angular অ্যাপ্লিকেশনগুলিতে HTTP রিকোয়েস্ট করার জন্য HttpClient ব্যবহার করা হয়, যা Angular এর HttpClientModule থেকে আসে। তবে, Angular RxJS এর উপর ভিত্তি করে কাজ করে, তাই HTTP রিকোয়েস্টের রেসপন্স বা ডেটার স্ট্রিম রিয়্যাক্টিভভাবেই পরিচালিত হয়।

Angular HTTP GET Request Example:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient) {}

  getPosts() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }
}

এখানে, Angular এর HttpClient.get() মেথডটি HTTP GET রিকোয়েস্ট পাঠাবে এবং এটি RxJS স্ট্রিম হিসেবে রেসপন্স পাবো।


সারাংশ

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

RxJS এর এই ক্ষমতা আপনাকে জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনগুলিতে সিম্পল এবং পটেন্ট HTTP রিকোয়েস্ট করার সুবিধা প্রদান করে।

Content added By
Promotion

Are you sure to start over?

Loading...