কিভাবে Async ব্যবহার করবেন এবং জাভাস্ক্রিপ্টে অপেক্ষা করবেন

ES6 এ প্রবর্তিত, প্রতিশ্রুতি আপনাকে বিভিন্ন কলব্যাক ফাংশন মোকাবেলা না করে সহজেই অ্যাসিঙ্ক্রোনাস কোড লিখতে দেয়। প্রতিশ্রুতির সাথে, মাল্টি-লেভেল কলব্যাক ফাংশনগুলি সম্পর্কে চিন্তা করার দরকার নেই যা লেখা এবং বজায় রাখা উভয়ই কঠিন।

জাভাস্ক্রিপ্টে আরেকটি বৈশিষ্ট্য রয়েছে যা প্রতিশ্রুতি ব্যবহার করে অ্যাসিঙ্ক্রোনাস কোড লেখা আরও সহজ করে তোলে:async/await ফাংশন। এগুলি আপনাকে কোড লিখতে দেয় যা সিঙ্ক্রোনাস দেখায় কিন্তু আসলে অ্যাসিঙ্ক্রোনাস রুটিন সম্পাদন করে।

এই নির্দেশিকায়, আমরা আলোচনা করতে যাচ্ছি async/await ফাংশন কী এবং আপনি কীভাবে এটি আপনার কোডে ব্যবহার করতে পারেন। শুরু করা যাক!

প্রতিশ্রুতি:একটি রিফ্রেশার

আমরা অ্যাসিঙ্ক/অপেক্ষা ফাংশন সম্পর্কে কথা বলা শুরু করার আগে, আমাদের প্রতিশ্রুতিগুলি পুনরুদ্ধার করতে হবে। একটি প্রতিশ্রুতি একটি অ্যাসিঙ্ক্রোনাস অপারেশন প্রতিনিধিত্ব করে। এটি আপনার কোডকে বলে যে একটি অপারেশন সঞ্চালিত হতে চলেছে এবং, যদি অপারেশন সফল হয়, একটি মান ফেরত দেওয়া হবে। অন্যথায়, আপনার প্রোগ্রামের বাকি অংশে একটি ত্রুটি ফিরিয়ে দেওয়া হবে।

একটি প্রতিশ্রুতি এমন একটি মান উপস্থাপন করে যা প্রতিশ্রুতি তৈরি করার সময় জানা যায় না। একটি প্রতিশ্রুতি হল এটি:একটি প্রতিশ্রুতি যে ভবিষ্যতের মানগুলি আপনার কোডে ফেরত পাঠানো হবে। কারণ প্রতিশ্রুতি একটি বস্তু, এটি মূলধন করা আবশ্যক।

এই দৃশ্যকল্প বিবেচনা করুন. আপনাকে একটি API থেকে একটি সংস্থান পুনরুদ্ধার করতে হবে। আপনার অনুরোধ প্রক্রিয়া করতে এটি এক বা দুই সেকেন্ড সময় নেবে। ব্যবহারকারীকে অনুরোধ প্রক্রিয়া করার জন্য অপেক্ষা করার পরিবর্তে, আপনি আপনার কোডটিকে একটি প্রতিশ্রুতিতে স্থানান্তর করতে পারেন যাতে আপনার বাকি প্রোগ্রামটি চলতে পারে।

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

এখানে একটি প্রতিশ্রুতির একটি উদাহরণ:

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

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

let sendCookies = new Promise(resolve => {
	setTimeout(() => {
		resolve("Your cookies have been sent!");
	}, 1000);
});

sendCookies.then(data => {
	console.log(data);
})

আমাদের কোড ফেরত:আপনার কুকি পাঠানো হয়েছে! যখন আমরা sendCookies.then() পদ্ধতিটি কার্যকর করি, তখন আমাদের প্রতিশ্রুতি শুরু হয়। আমাদের প্রোগ্রাম 1,000 মিলিসেকেন্ড অপেক্ষা করে এবং তারপর "আপনার কুকিজ পাঠানো হয়েছে!" মানটি ফেরত পাঠায়। আমাদের প্রধান প্রোগ্রামে।

কিভাবে Async ব্যবহার করবেন এবং অপেক্ষা করবেন

একটি async/await ফাংশনে, একটি প্রমিস ফেরত না আসা পর্যন্ত একটি ওয়েট স্টেটমেন্ট আপনার কোডকে তার অ্যাসিঙ্ক ফাংশনের মধ্যে কার্যকর করা থেকে ব্লক করে। এই কারণেই ডেভেলপাররা প্রায়ই বলে যে অ্যাসিঙ্ক/ওয়েট ফাংশনগুলি সিঙ্ক্রোনাস দেখায় কিন্তু অ্যাসিঙ্ক্রোনাস কাজগুলি সম্পাদন করে।

নিম্নলিখিত উদাহরণ বিবেচনা করুন:

function sendCookies() {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve("Your cookies have been sent!");
		}, 1000);
	});
}

async function main() {
	const sendMessage = await sendCookies();
	console.log(sendMessage);
}

main();

আমাদের কোড ফেরত:আপনার কুকি পাঠানো হয়েছে! আমাদের sendCookies() ফাংশনের জন্য 1,000 মিলিসেকেন্ড সময় লাগে "আপনার কুকি পাঠানো হয়েছে" মান ফেরাতে। এই ক্ষেত্রে, আমরা একটি অ্যাসিঙ্ক ফাংশন ঘোষণা করেছি যাতে আমাদের কোডটি সমাধান বা প্রত্যাখ্যান করার প্রতিশ্রুতির জন্য অপেক্ষা করে।

"অসিঙ্ক" কীওয়ার্ড আমাদের কোডকে বলে যে আমরা আমাদের ফাংশনে একটি অ্যাসিঙ্ক্রোনাস অপারেশন করতে চাই। "অপেক্ষা করুন" কীওয়ার্ডটি আমাদের কোডকে আমাদের প্রোগ্রাম চালানো চালিয়ে যাওয়ার আগে sendCookies() প্রতিশ্রুতির জন্য অপেক্ষা করতে বলে।

Async ফাংশন সবসময় একটি প্রতিশ্রুতি প্রদান করে।

অ্যাসিঙ্ক ব্যবহার করে এবং একাধিক ধাপের সাথে অপেক্ষা করুন

Async/await ফাংশনগুলি সাধারণত ব্যবহৃত হয় যখন একাধিক প্রতিশ্রুতি থাকে যার সাথে আপনাকে কাজ করতে হবে। একে কখনও কখনও প্রতিশ্রুতি চেইনিং বলা হয়। এর কারণ হল আপনার কোড পরেরটিতে যাওয়ার আগে প্রতিটি ধাপে একটি প্রতিশ্রুতি ফেরত দেওয়ার জন্য অপেক্ষা করবে:

function processOrder()  {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve("Your cookie order is being processed...");
		}, 1000);
	});
}

function sendCookies() {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve("Your cookies have been sent!");
		}, 1000);
	});
}

async function main() {
	const processingMessage = await processOrder();
	console.log(sendMessage);

	const sendMessage = await sendCookies();
	console.log(sendMessage);
}

আমাদের কোড ফিরে আসে:

Your cookie order is being processed…
Your cookies have been sent!

প্রতিটি ধাপ সম্পূর্ণ হতে 1,000 মিলিসেকেন্ড সময় নেয়। আমাদের প্রসেসঅর্ডার() ফাংশন থেকে প্রতিশ্রুতি ফিরে না আসা পর্যন্ত আমাদের sendCookies() ফাংশনটি কার্যকর করা হয় না৷

অ্যাসিঙ্ক এক্সপ্রেশন

তিনটি উপায়ে আপনি একটি async/await ফাংশন ব্যবহার করতে পারেন।

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

আপনি তীর ফাংশন ব্যবহার করে একটি অ্যাসিঙ্ক ফাংশন ঘোষণা করতে পারেন:

const main = async () => {
	const sendMessage = await sendCookies();
	console.log(sendMessage);
}

এই কোড ফেরত:আপনার কুকি পাঠানো হয়েছে! এটি আমাদের প্রথম উদাহরণের মতোই কিন্তু একটি প্রধান() ফাংশন ঘোষণা করার পরিবর্তে, আমরা একটি তীর ফাংশন ব্যবহার করেছি।

একইভাবে, আপনি ফাংশন এক্সপ্রেশন সিনট্যাক্স ব্যবহার করতে পারেন:

const main = async function() {
	const sendMessage = await sendCookies();
	console.log(sendMessage);
}

এই কোড ফেরত:আপনার কুকি পাঠানো হয়েছে! আপনি দেখতে পাচ্ছেন, আউটপুট আবার একই। একমাত্র পার্থক্য হল যেভাবে আমরা আমাদের ফাংশন ঘোষণা করেছি।

আসলে, এই সিনট্যাক্সটি আমাদের শেষ উদাহরণের সাথে খুব মিল। আমরা একটি তীর ফাংশন ব্যবহার করার পরিবর্তে "ফাংশন()" কীওয়ার্ড ব্যবহার করেছি।

একটি async/await ফাংশন ঘোষণা করার কোন সেরা উপায় নেই। এটি সবই নির্ভর করে আপনি যে প্রোগ্রামটি লিখছেন এবং আপনি কোন সিনট্যাক্স পছন্দ করেন তার উপর। যদিও আপনি তর্ক করতে পারেন যে তীর ফাংশনগুলি সবচেয়ে সংক্ষিপ্ত পদ্ধতি, একটি async/await ফাংশন ঘোষণা করার অন্যান্য উপায় অন্যান্য ক্ষেত্রে ভাল হতে পারে৷

Async/অপেক্ষা করে ওয়েব অনুরোধ প্রক্রিয়াকরণ

async/await ফাংশনের সবচেয়ে সাধারণ ব্যবহারগুলির মধ্যে একটি হল একটি API-এর সাথে ওয়েব অনুরোধগুলি প্রক্রিয়া করা যা প্রতিশ্রুতি-ভিত্তিক, যেমন fetch()৷ আপনি জাভাস্ক্রিপ্ট আনার জন্য আমাদের শিক্ষানবিস গাইডে fetch() ফাংশনটি কীভাবে ব্যবহার করবেন সে সম্পর্কে আরও পড়তে পারেন।

এই উদাহরণটি বিবেচনা করুন:

async function retrieveComments() {
	const res = await fetch('https://jsonplaceholder.typicode.com/comments');
	var comments = await res.json();

	comments = comments.map(comment => comment.name);

	console.log(comments);
}

retrieveComments();

আমাদের কোড ফিরে আসে:

["id labore ex et quam laborum", "quo vero reiciendis velit similique earum" …]

যখন আমরা আমাদের retrieveComments() ফাংশন চালাই, তখন আমরা আমাদের fetch() স্টেটমেন্ট চালানোর জন্য অপেক্ষা করতে "await" কীওয়ার্ড ব্যবহার করি। এর মানে হল যে আমাদের ওয়েব অনুরোধ প্রক্রিয়া না হওয়া পর্যন্ত আমাদের বাকি প্রোগ্রামটি চলতে থাকবে না। কারণ fetch() ফাংশন একটি প্রতিশ্রুতি প্রদান করে।

যখন একটি প্রতিশ্রুতি fetch() ফাংশন দ্বারা ফেরত দেওয়া হয়, তখন আমরা JSON-এ ফিরে আসা মানটিকে রূপান্তর করি। তারপরে আমরা সমস্ত মন্তব্যের নামের একটি তালিকা পুনরুদ্ধার করতে বস্তুর মাধ্যমে ম্যাপ করি এবং সেই তালিকাটি কনসোলে প্রিন্ট করি৷

একটি ত্রুটি কীভাবে পরিচালনা করবেন

ওহ, আমি কিভাবে চাই যে কোডে ত্রুটিগুলি ঘটবে না। কিন্তু তারা করে, এবং এটি এমন কিছু যা আমাদের বিকাশকারীদের পরিকল্পনা করতে হবে। একটি অ্যাসিঙ্ক্রোনাস ফাংশনে, একটি চেষ্টা...ক্যাচ স্টেটমেন্ট ব্যবহার করে ত্রুটি হ্যান্ডলিং সিঙ্ক্রোনাসভাবে করা হয়। এই কোডটি বিবেচনা করুন:

async function retrieveCookies() {
	const res = await fetch('https://thisapidoesnotexist.app/cookies');
	var cookieNames = await res.json();

	cookieNames = cookieNames.map(cookie => cookie.name);

	resolve(cookieNames);
}

async function printCookies() {
	const cookies = await retrieveCookies();
	console.log(cookies);
}

printCookies().catch(res => console.log(res.message));

আমাদের কোড রিটার্ন করে:

NetworkError when attempting to fetch resource. While our code is functional, the API we are trying to access does not exist. This means that our Promise cannot return any data, so it instead returns a rejected Promise.

আমাদের উদাহরণে, আমরা একটি .catch() স্টেটমেন্ট ব্যবহার করেছি আমাদের ফাংশন দ্বারা প্রত্যাবর্তিত ত্রুটিটি প্রিন্ট করার জন্য যদি একটি ফেরত দেওয়া হয়। এই ক্ষেত্রে, আমরা আমাদের কোড বলতে প্রত্যাখ্যান ('ত্রুটি') ব্যবহার করি যে একটি ত্রুটি দেখা দিয়েছে।

যদি এই বিবৃতিটি কার্যকর করা হয়, আমাদের .catch() বিবৃতিটি কাজ করে এবং সেই ত্রুটিটি প্রিন্ট করে।

একইভাবে, অ্যাসিঙ্ক ফাংশন সিনট্যাক্স ত্রুটিগুলি ধরতে পারে:

async function retrieveCookies() {
	const res = await fetch('https://thisapidoesnotexist.app/cookies');
	var cookieNames = await res.json();

	cookieNames = cookieNames.map(cookie => cookie.name);

	resolve(cookieNames);
}

async function printCookies() {
	try {
		const cookies = await retrieveCookies();
		console.log(cookies);
	} catch(error) {
		console.log(error);
	}
}

printCookies();

আমাদের কোড ফিরে আসে:সম্পদ আনার চেষ্টা করার সময় নেটওয়ার্ক ত্রুটি। এই উদাহরণে, আমাদের অপেক্ষা করার পদ্ধতিটি একটি সফল প্রতিশ্রুতি ফিরিয়ে দিয়েছে কিনা তা পরীক্ষা করার জন্য আমরা একটি চেষ্টা/ক্যাচ বিবৃতি ব্যবহার করেছি। আবার, আমাদের API বৈধ নয়, যার কারণে আমাদের প্রোগ্রাম আমাদের প্রতিশ্রুতি প্রত্যাখ্যান করে। যখন এটি ঘটে, আমাদের চেষ্টা/ক্যাচ ব্লকে "ক্যাচ" বিবৃতিটি কার্যকর করা হয়, যা আমাদের ত্রুটি কনসোলে লগ করে।

উপসংহার

Async/await ফাংশন আপনাকে আপনার কোডে অ্যাসিঙ্ক্রোনাস অপারেশন লিখতে সাহায্য করে। যখন একটি অ্যাসিঙ্ক ফাংশন ঘোষণা করা হয়, আপনি অপারেশনগুলি সমাধানের জন্য অপেক্ষা করতে "অপেক্ষা করুন" কীওয়ার্ড ব্যবহার করতে পারেন। অপেক্ষা কীওয়ার্ডটি অবশ্যই একটি ফাংশনের সাথে ব্যবহার করা উচিত যা একটি প্রতিশ্রুতি প্রদান করে।

এখন আপনি একজন বিশেষজ্ঞের মতো জাভাস্ক্রিপ্ট ফাংশন অ্যাসিঙ্ক/অপেক্ষা করতে শুরু করতে প্রস্তুত!