JavaScript Fetch API – সম্পূর্ণ বাংলা টিউটোরিয়াল
আজকের ওয়েব ডেভেলপমেন্টে ডাটা লোড এবং সার্ভার থেকে তথ্য আনার ক্ষেত্রে Fetch API একদম আধুনিক এবং সহজ উপায়। এটি পুরানো XMLHttpRequest এর তুলনায় অনেক বেশি সুবিধাজনক ও ক্লিন কোডিং দেয়। এই টিউটোরিয়ালে আমরা বিস্তারিত জানব Fetch API কী, কিভাবে কাজ করে, এবং কিভাবে ব্যবহার করতে হয়।
Fetch API কী?
Fetch API হলো ব্রাউজারের একটি বিল্ট-ইন ফাংশন যা ওয়েব সার্ভার থেকে ডাটা আনার জন্য ব্যবহৃত হয়। এটি Promise-based, তাই asynchronous কোড লেখা অনেক সহজ হয়। আপনি HTTP রিকোয়েস্ট পাঠাতে এবং রেসপন্স পেতে পারবেন খুব সহজে।
Fetch API ব্যবহার করার সহজ উদাহরণ
// একটি সিম্পল GET রিকোয়েস্ট
fetch(‘https://jsonplaceholder.typicode.com/posts/1’)
.then(response => {
if (!response.ok) {
throw new Error(‘নেটওয়ার্ক রেসপন্সে সমস্যা’);
}
return response.json();
})
.then(data => {
console.log(‘ডাটা:’, data);
})
.catch(error => {
console.error(‘ত্রুটি:’, error);
});
</script>
Fetch API এর প্রধান বৈশিষ্ট্য
- Promise-based, তাই asynchronous কোড লেখা সহজ হয়।
- কোনও ধরনের HTTP রিকোয়েস্ট (GET, POST, PUT, DELETE ইত্যাদি) করা যায়।
- Request এবং Response দুটি Obje ct হিসেবে কাজ করে।
- Headers, credentials ইত্যাদি কাস্টোমাইজ করা যায়।
- Response থেকে JSON, Text, Blob, FormData ইত্যাদি ফরম্যাটে ডাটা নেওয়া যায়।
POST রিকোয়েস্ট পাঠানো
কোনও ডাটা সার্ভারে পাঠানোর জন্য POST রিকোয়েস্ট ব্যবহার হয়। নিচের উদাহরণে দেখানো হলো কিভাবে Fetch API দিয়ে POST রিকোয়েস্ট করা হয়।
fetch(‘https://jsonplaceholder.typicode.com/posts’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({
title: ‘আমার প্রথম পোস্ট’,
body: ‘এই পোস্টটি Fetch API দিয়ে পাঠানো হয়েছে।’,
userId: 1
})
})
.then(response => response.json())
.then(data => {
console.log(‘সার্ভার থেকে রেসপন্স:’, data);
})
.catch(error => {
console.error(‘ত্রুটি:’, error);
});
</script>
Async/Await ব্যবহার করে Fetch API
Fetch API যেহেতু Promise-based, তাই ES8 এর async/await দিয়ে কোড আরও পরিষ্কার করা যায়।
async function fetchPost() {
try {
const response = await fetch(‘https://jsonplaceholder.typicode.com/posts/1’);
if (!response.ok) {
throw new Error(‘নেটওয়ার্ক সমস্যা’);
}
const data = await response.json();
console.log(‘ডাটা:’, data);
} catch (error) {
console.error(‘ত্রুটি:’, error);
}
}fetchPost();
</script>
Fetch API এর Error Handling
Fetch API শুধুমাত্র নেটওয়ার্ক লেভেলের এরর ধরতে পারে। HTTP রেসপন্সের ok প্রপার্টি চেক করে আমরা রিকোয়েস্ট সফল হয়েছে কিনা নিশ্চিত করতে পারি। উপরের উদাহরণগুলোতে আমরা এই পদ্ধতি দেখিয়েছি।
সারসংক্ষেপ
JavaScript Fetch API বর্তমান ওয়েব ডেভেলপমেন্টের একটি অত্যন্ত শক্তিশালী টুল। এটি দিয়ে সহজেই এবং দক্ষতার সাথে সার্ভার থেকে ডাটা আনা এবং পাঠানো যায়। এর Promise ভিত্তিক কাঠামো asynchronous প্রোগ্রামিংকে আরও সুবিধাজনক করে তোলে। আপনিও আজ থেকেই Fetch API ব্যবহার করে আপনার প্রজেক্টগুলোকে আধুনিক এবং দ্রুত করুন।