জাভাস্ক্রিপ্ট আনয়ন:একটি গাইড

আপনি কি জানেন যে আপনি ভ্যানিলা জাভাস্ক্রিপ্টে ওয়েব অনুরোধ করতে পারেন? এটা ঠিক, ওয়েব অনুরোধ করার জন্য আপনাকে কোনো লাইব্রেরি ইনস্টল করতে হবে না। এটি সব নয়:আমরা পুরানো, জটিল XMLHttpRequest টুল সম্পর্কে কথা বলছি না।

ফেচ API আপনাকে সাধারণ পুরানো জাভাস্ক্রিপ্টে Ajax অনুরোধ করতে দেয়। এটি একটি ওয়েব সার্ভারে ডেটা পুনরুদ্ধার এবং ডেটাতে পরিবর্তন করার জন্য একটি দরকারী টুল।

এই গাইডে, আমরা এপিআই নিয়ে আলোচনা করতে যাচ্ছি এবং কীভাবে আপনি API ব্যবহার করে ওয়েব অনুরোধ করতে পারেন। আমরা দুটি উদাহরণের মাধ্যমে কথা বলব:একটি GET অনুরোধ এবং একটি পোস্ট অনুরোধ৷

ফেচ এপিআই কি?

জাভাস্ক্রিপ্ট এখন দীর্ঘদিন ধরে নেটওয়ার্ক অনুরোধ পাঠাতে সক্ষম। XMLHTTPRrequest টুলটি সার্ভার থেকে ডেটা পুনরুদ্ধার করতে এবং সার্ভার থেকে তথ্য আপডেট করার জন্য প্রয়োজনীয় সংস্থানগুলি সরবরাহ করে।

যদিও এই টুলটি কার্যকর ছিল, এটি ব্যবহার করার জন্য বেশ ভার্বস এবং জটিলও ছিল। অন্যদিকে, ফেচ হল একটি নতুন বিকল্প যা ওয়েব অনুরোধ করা সহজ করে তোলে।

ফেচ API সমস্ত আধুনিক ব্রাউজারে সমর্থিত। এর মানে হল যে একবার আপনি এটি কীভাবে ব্যবহার করবেন তা শিখলে, ওয়েব অনুরোধ করার সময় আপনাকে ব্রাউজারের সামঞ্জস্য নিয়ে চিন্তা করতে হবে না৷

ফেচ ব্যবহার করে কিভাবে একটি GET অনুরোধ করবেন

আনয়ন কিভাবে কাজ করে তা ব্যাখ্যা করার সর্বোত্তম উপায় হল উদাহরণ। এই টিউটোরিয়ালের জন্য, আমরা ওয়েব পরিষেবা JSONPlaceholder ব্যবহার করতে যাচ্ছি। এটি একটি এপিআই যা পূর্ব-লিখিত ডামি ডেটা সহ আসে যা আমরা আমাদের ওয়েব অনুরোধগুলি পরীক্ষা করতে ব্যবহার করতে পারি।

নিম্নলিখিত কোডটি JSONPlaceholder থেকে প্রথম পোস্ট পুনরুদ্ধার করার জন্য একটি GET অনুরোধ তৈরি করে:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

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 }

আসুন আমাদের কোড ভাঙ্গা যাক। প্রথম লাইনে, আমরা fetch() ব্যবহার করেছি JSONPlaceholder API এ একটি ওয়েব অনুরোধ শুরু করার পদ্ধতি। তারপরে আমরা .then() ব্যবহার করেছি আমাদের ওয়েব অনুরোধ করার পরে আমাদের কোডটি কী করতে হবে তা বলার পদ্ধতি।

আমাদের প্রথম .then() এ পদ্ধতি, আমরা API দ্বারা প্রত্যাবর্তিত প্রতিক্রিয়াকে JSON এ রূপান্তর করি। এটি আমাদের ডেটা আরও পঠনযোগ্য করে তোলে। আমরা আরেকটি .then() ব্যবহার করি কনসোলে প্রতিক্রিয়া লগ করার পদ্ধতি। এটি আমাদের JSONPlaceholder API থেকে আইডি 1 সহ পোস্ট দেখায়৷

কিভাবে একটি পোস্টের অনুরোধ করতে হয়

GET একমাত্র অনুরোধের ধরন নয় যা আপনি ফেচ API দিয়ে করতে পারেন। এছাড়াও কার্যকারিতা রয়েছে যা POST, PUT এবং DELETE অনুরোধগুলিকে সমর্থন করে৷ এইগুলির জন্য সিনট্যাক্স একই, তাই আমরা শুধু একটি উদাহরণ দিয়ে চলে যাচ্ছি:কীভাবে একটি POST অনুরোধ করতে হয়।

আপনি যখন একটি POST, PUT, বা DELETE অনুরোধ করছেন, তখন সাধারণত তিনটি তথ্য আপনাকে নির্দিষ্ট করতে হবে:

• যে URLটিতে আপনি অনুরোধ করছেন।
• অনুরোধ করার জন্য আপনি যে পদ্ধতিটি ব্যবহার করছেন (এই ক্ষেত্রে, পোস্ট করুন)
• আপনি সার্ভারে যে ডেটা পাঠাতে চান

এখানে একটি কোড স্নিপেট যা 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 }

আমাদের কোডে, আমরা প্রথমে একটি ডেটা অবজেক্ট ঘোষণা করি। এটি সেই ডেটা সংরক্ষণ করে যা আমরা সার্ভারে পাঠাতে চাই। এই ক্ষেত্রে, আমরা লেসলি টিউডার নামে একজন ব্যবহারকারীর করা মন্তব্য সম্পর্কে ডেটা পাঠাচ্ছি।

তারপরে আমরা অন্য একটি বস্তু ঘোষণা করি যা আমাদের আনার অনুরোধের সাথে যুক্ত বিকল্পগুলি সংরক্ষণ করে। এই বস্তুটি আমাদের অনুরোধ (POST) করার জন্য যে পদ্ধতিটি ব্যবহার করছি, আমরা যে ডেটা পাঠাতে চাই, সেইসাথে আমরা যে শিরোনাম পাঠাতে চাই তা নির্দিষ্ট করে।

অবশেষে, আমরা fetch() ব্যবহার করি পদ্ধতি আসলে আমাদের অনুরোধ করতে. আমাদের প্রথম উদাহরণের মত, আমরা .then() ব্যবহার করি প্রতিক্রিয়া পুনরুদ্ধার করার পদ্ধতি, এটিকে JSON-এ রূপান্তর করুন, তারপর কনসোলে প্রিন্ট করুন।

জাভাস্ক্রিপ্ট ফেচ ব্যবহার করে ত্রুটিগুলি কীভাবে পরিচালনা করবেন

এটি একটি দুর্ভাগ্যজনক সত্য যে কিছু ওয়েব অনুরোধ উদ্দেশ্য অনুযায়ী কাজ করে না। হতে পারে তথ্য ভুলভাবে গঠন করা হয়েছে, অথবা হয়ত একটি সার্ভার সমস্যা আছে. এটি গুরুত্বপূর্ণ যে আমরা এই ইভেন্টগুলি আগে থেকেই অনুমান করি যাতে আমরা সেগুলিকে যখন এবং যখন দেখা দেয় তখন আমরা সেগুলি পরিচালনা করতে পারি৷

.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() ব্যবহার করেছি এই ত্রুটিটি পেতে এবং কনসোলে প্রিন্ট করার জন্য বিবৃতি।

উপসংহার

ফেচ API জাভাস্ক্রিপ্টে ওয়েব অনুরোধ করা সহজ করে তোলে। এপিআই ভ্যানিলা জাভাস্ক্রিপ্টের অংশ তাই কোনো লাইব্রেরি ইনস্টল বা রেফারেন্স করার প্রয়োজন নেই। আরও কি, আপনি GET, POST, PUT, এবং DELETE অনুরোধগুলি করতে ফেচ API ব্যবহার করতে পারেন।

এখন আপনি একজন পেশাদার বিকাশকারীর মতো ফেচ API ব্যবহার করে ওয়েব অনুরোধ করা শুরু করতে প্রস্তুত!