টাইপস্ক্রিপ্টে ফেটচ/এক্সএমএল এইচটিটিপি রিকোয়েস্ট

এই নিবন্ধটি টাইপস্ক্রিপ্টে ফেটচ/এক্সএমএলএইচটিটিপি রিকোয়েস্ট সম্পর্কে ব্যাখ্যা করে।

আপনি Fetch API এবং XMLHttpRequest কীভাবে ব্যবহার করতে হয় এবং তাদের পার্থক্যগুলি সম্পর্কে শিখতে পারেন।

YouTube Video

টাইপস্ক্রিপ্টে ফেটচ/এক্সএমএল এইচটিটিপি রিকোয়েস্ট

টাইপস্ক্রিপ্টে, এইচটিটিপি রিকোয়েস্ট প্রধানত দুটি এপিআই ব্যবহার করে করা হয়: ফেটচ এপিআই এবং এক্সএমএলএইচটিটিপি রিকোয়েস্ট। টাইপস্ক্রিপ্ট ব্যবহার করে, আপনি এই এপিআইগুলোর সাথে অ্যাসিঙ্ক্রোনাস যোগাযোগ করার সময় রিকোয়েস্ট এবং রেসপন্সের জন্য টাইপ চেকিং প্রবর্তন করতে পারেন, যা আপনাকে আরও নিরাপদ কোড লিখতে সহায়তা করে। নিচে, আমরা প্রতিটির ব্যবহারের পদ্ধতি পরিচিত করাব।

Fetch API

ফেটচ এপিআই একটি প্রমিজ-ভিত্তিক এপিআই যা অ্যাসিঙ্ক্রোনাস যোগাযোগ (এইচটিটিপি রিকোয়েস্ট) সহজভাবে সম্পাদনের জন্য ব্যবহার করা হয়। টাইপস্ক্রিপ্টে, আপনি fetch মেথড ব্যবহার করে রিকোয়েস্ট করতে পারেন এবং টাইপ-সুরক্ষিত পদ্ধতিতে রেসপন্স প্রক্রিয়া করতে পারেন।

প্রাথমিক ব্যবহার

নিচে একটি GET রিকোয়েস্টের মৌলিক উদাহরণ দেওয়া হয়েছে।

 1const url = 'https://jsonplaceholder.typicode.com/posts';
 2
 3fetch(url)
 4    .then(response => {
 5        if (!response.ok) {
 6        throw new Error('Network response was not ok');
 7        }
 8        return response.json();  // Parse the response as JSON
 9    })
10    .then(data => {
11        console.log(data);
12    })
13    .catch(error => {
14        console.error('Fetch error:', error);
15    });

• এই কোডটি নির্দিষ্ট URL-এ একটি GET অনুরোধ পাঠায়, প্রাপ্ত প্রতিউত্তরটি JSON হিসেবে পার্স করে এবং কনসোলে আউটপুট করে।

টাইপস্ক্রিপ্টে টাইপ-সুরক্ষিত ডেটা হ্যান্ডলিং

fetch মেথড থেকে আসা রেসপন্সের টাইপ অস্পষ্ট হওয়ায়, টাইপস্ক্রিপ্টের টাইপ চেকিং এর সুবিধা নিতে আপনি রেসপন্স টাইপ স্পষ্টভাবে সংজ্ঞায়িত করতে পারেন।

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9const url = 'https://jsonplaceholder.typicode.com/posts';
10
11fetch(url)
12    .then(response => response.json())
13    .then((data: Post[]) => {
14        data.forEach(post => {
15            console.log(`Title: ${post.title}`);
16        });
17    })
18    .catch(error => {
19        console.error('Error fetching data:', error);
20    });

• এই কোডটি fetch দিয়ে প্রাপ্ত ডেটায় Post টাইপ প্রয়োগ করে, রেসপন্সটি টাইপ-সেফভাবে প্রক্রিয়া করে এবং প্রতিটি পোস্টের শিরোনাম কনসোলে আউটপুট করে।

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

সার্ভারে ডেটা পাঠানোর জন্য, POST মেথড ব্যবহার করুন। বডিতে JSON পাঠাতে, headers এবং body নির্দিষ্ট করুন।

 1const postData = {
 2    title: 'foo',
 3    body: 'bar',
 4    userId: 1
 5};
 6
 7fetch('https://jsonplaceholder.typicode.com/posts', {
 8        method: 'POST',
 9        headers: {
10            'Content-Type': 'application/json'
11        },
12        body: JSON.stringify(postData)
13    })
14    .then(response => response.json())
15    .then(data => {
16        console.log('Created post:', data);
17    })
18    .catch(error => {
19        console.error('Error posting data:', error);
20    });

• এই কোডটি একটি POST অনুরোধের মাধ্যমে সার্ভারে JSON ফরম্যাটে ডেটা পাঠায়, JSON রূপে রেসপন্স গ্রহণ করে এবং কনসোলে আউটপুট করে।

অ্যাসিঙ্ক্রোনাস ফাংশন (async/await) ব্যবহার করে ফেটচ

টাইপস্ক্রিপ্টে async/await ব্যবহার করে, আপনি আরও সহজে অ্যাসিঙ্ক্রোনাস প্রসেসিং লিখতে পারেন।

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9async function fetchPosts() {
10    try {
11        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
12        if (!response.ok) {
13            throw new Error('Network response was not ok');
14        }
15        const data: Post[] = await response.json();
16        console.log(data);
17    } catch (error) {
18        console.error('Fetch error:', error);
19    }
20}
21
22fetchPosts();

• এই কোডটি async/await সিনট্যাক্স ব্যবহার করে পোস্ট ডেটা অ্যাসিনক্রোনাসভাবে ফেচ করে, রেসপন্সটি Post[] টাইপ হিসেবে প্রক্রিয়া করে এবং কনসোলে আউটপুট করে।

XMLHttpRequest

XMLHttpRequest একটি পুরোনো এপিআই এবং এটি ফেটচ এপিআই এর তুলনায় কিছুটা জটিল, তবে এটি ব্রাউজার সামঞ্জস্যতা বা আরও উন্নত নিয়ন্ত্রণ প্রয়োজন হলে ব্যবহার করা যেতে পারে।

XMLHttpRequest এর মৌলিক ব্যবহার

নিচে একটি GET রিকোয়েস্টের একটি উদাহরণ দেওয়া হয়েছে।

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onreadystatechange = function () {
 5    if (xhr.readyState === 4 && xhr.status === 200) {
 6        const data = JSON.parse(xhr.responseText);
 7        console.log(data);
 8    }
 9};
10
11xhr.send();

• এই কোডটি নির্দিষ্ট URL-এ XMLHttpRequest ব্যবহার করে একটি GET অনুরোধ পাঠায়, রেসপন্সটি JSON হিসেবে পার্স করে এবং কনসোলে আউটপুট করে।

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

সার্ভারে ডেটা পাঠানোর জন্য, open মেথডে POST নির্দিষ্ট করুন এবং send দিয়ে ডেটা পাঠান।

 1const xhr = new XMLHttpRequest();
 2xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
 3xhr.setRequestHeader('Content-Type', 'application/json');
 4
 5const postData = JSON.stringify({
 6    title: 'foo',
 7    body: 'bar',
 8    userId: 1
 9});
10
11xhr.onreadystatechange = function () {
12    if (xhr.readyState === 4 && xhr.status === 201) {
13        console.log('Created post:', xhr.responseText);
14    }
15};
16
17xhr.send(postData);

• এই কোডটি XMLHttpRequest ব্যবহার করে সার্ভারে একটি POST অনুরোধের মাধ্যমে JSON ফরম্যাটে ডেটা পাঠায় এবং তৈরি করা ডেটা সংবলিত রেসপন্স কনসোলে আউটপুট করে।

XMLHttpRequest এর সাথে ত্রুটি পরিচালনা

আপনি onerror ইভেন্ট ব্যবহার করে রিকোয়েস্ট ত্রুটি পরিচালনা করতে পারেন।

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onerror = function () {
 5    console.error('Request failed');
 6};
 7
 8xhr.onload = function () {
 9    if (xhr.status === 200) {
10        console.log('Response:', xhr.responseText);
11    } else {
12        console.error('Error:', xhr.status);
13    }
14};
15
16xhr.send();

• এই কোডটি XMLHttpRequest-এর মাধ্যমে একটি GET অনুরোধ কার্যকর করে, অনুরোধজনিত ভুলসমূহ onerror দিয়ে হ্যান্ডল করে এবং সফলতা ও ব্যর্থতা উভয় ক্ষেত্রেই রেসপন্স যথাযথভাবে লগ করে।

ফেটচ এপিআই এবং এক্সএমএলএইচটিটিপি রিকোয়েস্টের তুলনা

সারসংক্ষেপ

টাইপস্ক্রিপ্টে, আপনি Fetch API ব্যবহার করে সংক্ষিপ্ত এবং টাইপ-নিরাপদ কোডে অ্যাসিঙ্ক্রোনাস অনুরোধ করতে পারেন। অন্যদিকে, XMLHttpRequest একটি পুরানো API হলেও কিছু নির্দিষ্ট পরিস্থিতিতে এখনও ব্যবহার করা যেতে পারে। সাধারণত, সহজ এবং আধুনিক Fetch API ব্যবহার করার পরামর্শ দেওয়া হয়, তবে যদি ব্রাউজার সামঞ্জস্য বা অগ্রগতির ট্র্যাকিং প্রয়োজন হয়, তবে XMLHttpRequestও বিবেচনা করা যেতে পারে।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video