আপনি কি জানেন যে আপনি ভ্যানিলা জাভাস্ক্রিপ্টে ওয়েব রিকোয়েস্ট করতে পারেন? হ্যাঁ, আপনি শুনতে পেরেছেন সঠিক। আপনি কোনো লাইব্রেরি ইনস্টল করতে হবে না ওয়েব রিকোয়েস্ট করতে। এটাই সব নয়: আমরা পুরনো, জটিল XMLHttpRequest টুলের কথা বলছি না।
Fetch API আপনাকে প্লেইন জাভাস্ক্রিপ্টে Ajax রিকোয়েস্ট করতে দেয়। এটি ডেটা রিট্রিভ করতে এবং ওয়েব সার্ভারে ডেটা পরিবর্তন করতে একটি উপকারী টুল।
এই গাইডে, আমরা Fetch API কী এবং API ব্যবহার করে ওয়েব রিকোয়েস্ট কীভাবে করতে হয় তা আলোচনা করব। আমরা দুটি উদাহরণের মাধ্যমে আলোচনা করব: একটি GET রিকোয়েস্ট এবং একটি POST রিকোয়েস্ট।
Fetch API কী?
জাভাস্ক্রিপ্ট অনেক দিন ধরে নেটওয়ার্ক রিকোয়েস্ট পাঠাতে সক্ষম। XMLHTTPRequest টুল আপনাকে সার্ভার থেকে ডেটা রিট্রিভ করতে এবং সার্ভার থেকে ইনফরমেশন আপডেট করতে প্রয়োজনীয় রিসোর্স দিয়েছিল।
যদিও এই টুলটি কার্যকর ছিল, এটি khá বর্বیয়েট এবং ব্যবহার করা জটিল ছিল। Fetch, অন্যদিকে, একটি নতুন অপশন যা ওয়েব রিকোয়েস্ট করা সহজ করে দিয়েছে।
Fetch API সমস্ত আধুনিক ব্রাউজারে সাপোর্টেড। এর মানে, একবার আপনি এটি কীভাবে ব্যবহার করতে হয় শিখলে, আপনাকে ওয়েব রিকোয়েস্ট করার সময় ব্রাউজার কম্প্যাটিবিলিটি নিয়ে চিন্তা করতে হবে না।
Fetch ব্যবহার করে GET রিকোয়েস্ট কীভাবে করবেন
Fetch কীভাবে কাজ করে তা বোঝানোর সেরা উপায় হলো উদাহরণ। এই টিউটোরিয়ালে, আমরা JSONPlaceholder ওয়েব সার্ভিস ব্যবহার করব। এটি একটি API যাতে প্রি-লিখিত ডামি ডেটা থাকে যা আমরা আমাদের ওয়েব রিকোয়েস্ট টেস্ট করতে ব্যবহার করতে পারি।
নিচের কোড JSONPlaceholder থেকে প্রথম পোস্ট রিট্রিভ করতে একটি GET রিকোয়েস্ট তৈরি করে:
fetch('https://jsonplaceholder.typicode.com/posts/1') .then(response => response.json()) .then(json => console.log(json))
এই কোড রিটার্ন করে:
{ body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto", id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", userId: 1 }
আমাদের কোড ভাঙে ব্যাখ্যা করি। প্রথম লাইনে, আমরা JSONPlaceholder API-তে একটি ওয়েব রিকোয়েস্ট শুরু করতে fetch() মেথড ব্যবহার করেছি। তারপর, আমরা .then() মেথড ব্যবহার করেছি আমাদের কোডকে বলতে আমাদের ওয়েব রিকোয়েস্ট হলে এরপর কী করবে।
আমাদের প্রথম .then() মেথডে, আমরা API দ্বারা রিটার্ন করা রেসপন্সকে JSON-এ কনভার্ট করি। এটি আমাদের ডেটাকে আরও রিডেবল করে। আমরা আরেকটি .then() মেথড ব্যবহার করি রেসপন্স কনসোলে লগ করার জন্য। এটি আমাদের JSONPlaceholder API থেকে ID 1 সহ পোস্টটি দেখায়।
POST রিকোয়েস্ট কীভাবে করবেন
GET একমাত্র রিকোয়েস্ট টাইপ নয় যা আপনি Fetch API-তে করতে পারেন। POST, PUT, এবং DELETE রিকোয়েস্টের জন্যও ফাংশনালিটি আছে। সিনট্যাক্স একই, তাই আমরা শুধু একটি উদাহরণ দেখব: POST রিকোয়েস্ট কীভাবে করবেন।
যখন আপনি POST, PUT, বা DELETE রিকোয়েস্ট করেন, সাধারণত তিনটি ইনফরমেশন স্পেসিফাই করতে হয়:
- যে URL-এ আপনি রিকোয়েস্ট করছেন।
- আপনি রিকোয়েস্ট করার জন্য যে মেথডটি ব্যবহার করছেন (এই কেসে, POST)
- সার্ভারে পাঠাতে চাওয়া ডেটা
JSONPlaceholder API ব্যবহার করে একটি নতুন কমেন্ট তৈরি করার কোড স্নিপেট নিচে দেওয়া হলো:
const data = { name: "Leslie Tudor", email: "leslie.tudor@email.com", body: "This is an example post by Career Karma!", postId: 1 } const options = { method: "POST", body: JSON.stringify(data), headers: { "Content-Type": "application/json" } }; fetch('https://jsonplaceholder.typicode.com/comments', options) .then(response => response.json()) .then(json => console.log(json))
আমাদের কোড আমাদের নতুন তৈরি করা পোস্টটি JSON ফরম্যাটে রিটার্ন করে:
{ body: "This is an example post by Career Karma!", email: "leslie.tudor@email.com", id: 501, name: "Leslie Tudor", postId: 1 }
আমাদের কোডে, আমরা প্রথমে একটি data অবজেক্ট ঘোষণা করি। এটি সার্ভারে পাঠাতে চাওয়া ডেটা সংরক্ষণ করে। এই কেসে, আমরা Leslie Tudor নামক একটি ইউজার tarafından করা কমেন্টের ডেটা পাঠাচ্ছি।
তারপর আমরা আরেকটি অবজেক্ট ঘোষণা করি যা আমাদের fetch রিকোয়েস্টের সাথে যুক্ত অপশনগুলো সংরক্ষণ করে। এই অবজেক্টটি রিকোয়েস্ট করার মেথড (POST), আমরা যে ডেটা পাঠাতে চাই, সেইসাথে আমরা যে হেডারগুলো পাঠাতে চাই সেগুলো স্পেসিফাই করে।
অবশেষে, আমরা আমাদের রিকোয়েস্ট আসলে করতে fetch() মেথড ব্যবহার করি। প্রথম উদাহরণের মতো, আমরা .then() মেথডগুলো ব্যবহার করি রেসপন্স রিট্রিভ করতে, JSON-এ কনভার্ট করতে, তারপর কনসোলে প্রিন্ট করতে।
JavaScript Fetch ব্যবহার করে এরর হ্যান্ডেল করা
এটি দুর্ভাগ্যকর সত্য যে কিছু ওয়েব রিকোয়েস্ট উদ্দেশ्यानুযায়ী কাজ করে না। হয়তো ডেটা সঠিকভাবে স্ট্রাকচারড নয়, অথবা হয়তো সার্ভার সমস্যা আছে। এই ইভেন্টগুলো পূর্বাভাস করা গুরুত্বপূর্ণ যাতে সেগুলো হলে আমরা সেগুলো হ্যান্ডেল করতে পারি।
.catch() নামে একটি মেথড আছে যা আপনি আপনার কোড দ্বারা রিটার্ন করা যেকোনো এরর ক্যাচ করতে ব্যবহার করতে পারেন। Promise.reject() মেথডসহ কম্বাইন করলে, আপনি এটি এরর হ্যান্ডেল করতে ব্যবহার করতে পারেন:
fetch('https://jsonplaceholder.typicode.com/comments/999, options) .then(response => { if (response.ok) { console.log(response.json()); return response.json(); } else { return Promise.reject({ statusText: response.statusText }) } }) .catch(error => console.log("ERROR:", error.statusText));
এই কোড রিটার্ন করে:
"ERROR:", "Not Found"
আমাদের কোডে, আমরা response.ok মেথড ব্যবহার করি আমাদের রিকোয়েস্ট সফল হয়েছে কিনা চেক করতে। এই উদাহরণে, আমরা একটি কমেন্ট রিট্রিভ করার চেষ্টা করেছি যা অস্তিত্বে নেই, কমেন্ট #999। এটি আমাদের else স্টেটমেন্টের কন্টেন্ট এক্সিকিউট করিয়ে দেয়, যা একটি রিজেক্টেড প্রমিস রিটার্ন করে। এই প্রমিসে JSONPlaceholder API দ্বারা রিটার্ন করা এরর মেসেজ থাকে।
তারপর আমরা এই এরর রিসিভ করতে এবং কনসোলে প্রিন্ট করতে একটি .catch() স্টেটমেন্ট ব্যবহার করি।
উপসংহার
Fetch API জাভাস্ক্রিপ্টে ওয়েব রিকোয়েস্ট করা সহজ করে দিয়েছে। API ভ্যানিলা জাভাস্ক্রিপ্টের অংশ তাই কোনো লাইব্রেরি ইনস্টল বা রেফারেন্স করার দরকার নেই। আরও, আপনি Fetch API ব্যবহার করে GET, POST, PUT, এবং DELETE রিকোয়েস্ট করতে পারেন।
এখন আপনি Fetch API ব্যবহার করে ওয়েব রিকোয়েস্ট প্রফেশনাল ডেভেলপারের মতো করতে পারবেন!
No