Fetch API (ফেচ এপিআই) হল নেটিভ ব্রাউজার ফাংশনালিটি যা JavaScript এর মাধ্যমে সহজে HTTP অনুরোধ (request) পাঠাতে এবং রেসপন্স (response) গ্রহণ করতে সাহায্য করে। এটি Asynchronous (অ্যাসিঙ্ক্রোনাস) ভাবে কাজ করে, যার ফলে পৃষ্ঠা রিলোড না করেই ডেটা লোড করা সহজ হয়।
Fetch API এর মৌলিক ধারণা
Fetch API সাধারণত fetch() ফাংশন ব্যবহার করে HTTP অনুরোধ পাঠায়। এই ফাংশন একটি Promise রিটার্ন করে, যা রেসপন্স পাওয়ার পর .then() ব্লকে এক্সিকিউট হয়। কোন সমস্যা হলে .catch() ব্লকে ধরা যায়।
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
উপরের কোডে fetch() একটি GET অনুরোধ পাঠায় https://api.example.com/data এই URL এ। রেসপন্স পাওয়ার পর .json() মেথড ব্যবহার করে JSON ডেটা অবজেক্টে রূপান্তর করা হয়।
বিভিন্ন HTTP অনুরোধ (GET, POST)
GET অনুরোধ
GET অনুরোধ ডেটা সংগ্রহ করতে ব্যবহৃত হয়। উপরোক্ত উদাহরণটি একটি GET অনুরোধেরই উদাহরণ।
fetch('https://api.example.com/users')
.then(response => response.json())
.then(users => {
console.log(users);
})
.catch(err => console.error(err));
POST অনুরোধ
POST অনুরোধ সার্ভারে নতুন ডেটা পাঠাতে ব্যবহৃত হয়। এই ক্ষেত্রে fetch() ফাংশনে দ্বিতীয় আর্গুমেন্ট হিসেবে একটি কনফিগ অবজেক্ট পাস করতে হয়, যেখানে method: 'POST' এবং body নির্দিষ্ট করতে হয়।
fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: 'John Doe', email: 'john@example.com' })
})
.then(response => response.json())
.then(data => {
console.log('User created:', data);
})
.catch(error => console.error('Error:', error));
Fetch API এর Response হ্যান্ডলিং
Fetch API এর রেসপন্সে সাধারণত .json(), .text(), .blob(), .arrayBuffer() এর মতো মেথড থাকে। আপনার ডেটা ফরম্যাট অনুযায়ী পছন্দের মেথড ব্যবহার করতে পারেন। সাধারণত .json() সবচেয়ে বেশি ব্যবহৃত হয় JSON ডেটা রিড করতে।
fetch('https://api.example.com/products')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(products => {
console.log(products);
})
.catch(error => console.error('Error:', error));
উপরের কোডে response.ok চেক করা হয়েছে, যাতে ৪০৪ বা ৫০০ এর মতো কোনো HTTP এরর থাকলে তা ধরা যায়।
Async/Await ব্যবহার করে Fetch
Async/Await ব্যবহার করলে Fetch API এর কোড আরও সহজ এবং পরিষ্কার হয়। Async ফাংশনের ভিতরে আপনি await ব্যবহার করতে পারেন, যা Promise রেজল্ভ হওয়া পর্যন্ত অপেক্ষা করে।
async function loadData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network Error');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
loadData();
Fetch API ব্যবহারের সুবিধা
- ব্রাউজার নেটিভ সাপোর্ট: Fetch API আধুনিক ব্রাউজারে বিল্ট-ইন সাপোর্ট পায়, কোন থার্ড-পার্টি লাইব্রেরি প্রয়োজন হয় না।
- Promises ভিত্তিক: ফেচ অ্যাপিআই Promise ব্যবহার করে, যা Callback Hell এড়াতে সাহায্য করে।
- সহজ সিনট্যাক্স: গতানুগতিক XMLHttpRequest এর থেকে Fetch API এর সিনট্যাক্স অনেক সহজ।
- Async/Await সাপোর্ট: Async/Await ব্যবহার করে কোড আরও পরিষ্কার করা যায়।
Fetch API ব্যবহার করে ডেটা লোড করা একটি আধুনিক এবং কার্যকর পদ্ধতি। এটি অ্যাপ্লিকেশনকে আরও গতিশীল এবং ইন্টারেক্টিভ করে তোলে।
Read more
