ES6-এ Promise এসে অ্যাসিনক্রোনাস কোড লিখা অনেক সহজ হয়েছে। কলব্যাক ফাংশনের জঞ্জাল থেকে মুক্তি পেয়েছি। Promise-এর ওপর আরও সহজ করে দিয়েছে async/await ফাংশন। এটি সিনক্রোনাস কোডের মতো দেখাবে কিন্তু আসলে অ্যাসিনক্রোনাস রুটিন পারফর্ম করবে।
এই গাইডে async/await ফাংশন কী এবং কীভাবে ব্যবহার করতে হয় তা আলোচনা করব।
Promise: একদৃষ্টিতে
async/await বুঝতে Promise জানা জরুরি। Promise একটি অ্যাসিনক্রোনাস অপারেশন রিপ্রেজেন্ট করে। এটি বলে দেয় যে একটি অপারেশন হবে এবং সফল হলে ভ্যালু রিটার্ন করবে, না হলে এরর রিটার্ন করবে।
Promise একটি ভ্যালু রিপ্রেজেন্ট করে যা Promise তৈরি করার সময় অজানা থাকে। এটি ভবিষ্যতে ভ্যালু ফেরত দেয়ার একটি "প্রতিশ্রুতি"। Promise একটি অবজেক্ট, তাই এর প্রথম অক্ষর বড় হাতের (Promise)।
উদাহরণ: একটি API থেকে রিসোর্স রিট্রিভ করতে ১-২ সেকেন্ড লাগে। ইউজারকে অপেক্ষা করাবার বদলে কোডটি Promise-এ র্যাপ করলে বাকি প্রোগ্রাম চলতে থাকে। ডেটা আসার সাথে সাথে Promise মেইন প্রোগ্রামে পাঠিয়ে দেয়।
Promise উদাহরণ:
let sendCookies = new Promise(resolve => { setTimeout(() => { resolve("Your cookies have been sent!"); }, 1000); }); sendCookies.then(data => { console.log(data); })
ফলাফল: "Your cookies have been sent!"। sendCookies.then() কল করলে Promise শুরু হয়। ১০০০ মিলিসেকেন্ড পর ভ্যালু রিটার্ন হয়।
Async এবং Await কীভাবে ব্যবহার করবেন
async/await ফাংশনে await স্টেটমেন্ট কোড ব্লক করে রাখে যতক্ষণ না Promise রিটার্ন হয়। এইीलिये ডেভেলপাররা বলে 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();
ফলাফল: "Your cookies have been sent!"। ১০০০ মিলিসেকেন্ড পর sendCookies() ভ্যালু রিটার্ন করে। async কীওয়ার্ড বলে দেয় যে ফাংশনে অ্যাসিনক্রোনাস অপারেশন আছে। await কীওয়ার্ড বলে দেয় যে sendCookies() Promise রিজল্ট বা রিজেক্ট হওয়া পর্যন্ত অপেক্ষা করবে।
Async ফাংশন সবসময় একটি Promise রিটার্ন করে।
একাধিক স্টেপের সাথে Async/Await ব্যবহার
async/await সবচেয়ে বেশি ব্যবহৃত হয় যখন একাধিক Promise চেইন করা থাকে (Promise chaining)। প্রতিটি স্টেপের Promise রিটার্ন হওয়া পর্যন্ত কোড অপেক্ষা করে:
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(processingMessage); const sendMessage = await sendCookies(); console.log(sendMessage); }
ফলাফল:
Your cookie order is being processed… Your cookies have been sent!
প্রতিটি স্টেপ ১০০০ মিলিসেকেন্ড নেয়। sendCookies() এক্সিকিউট হয় না যতক্ষণ না processOrder() Promise রিটার্ন করে।
Async এক্সপ্রেশন
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-র সবচেয়ে সাধারণ ব্যবহার হলো Promise-বেসড API (যেমন fetch()) দিয়ে ওয়েব রিকোয়েস্ট প্রসেস করা। 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();
ফলাফল: কমেন্টের নামগুলোর লিস্ট। await fetch() দিয়ে ওয়েব রিকোয়েস্ট সম্পূর্ণ হওয়া পর্যন্ত অপেক্ষা করা হয়েছে। Promise রিটার্ন হলে JSON-এ কনভার্ট করে map() দিয়ে নামগুলো বের করা হয়েছে।
এরর হ্যান্ডলিং
কোডে এরর হয়, এবং ডেভেলপারদের সেটি হ্যান্ডল করতে হয়। অ্যাসিনক্রোনাস ফাংশনে এরর হ্যান্ডলিং সিনক্রোনাসলি try...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() { const cookies = await retrieveCookies(); console.log(cookies); } printCookies().catch(res => console.log(res.message));
ফলাফল: NetworkError when attempting to fetch resource. API অস্তিত্ব নেই, তাই Promise রিজেক্ট হয়েছে। .catch() দিয়ে এরর ক্যাচ করা হয়েছে।
try/catch ব্লকও ব্যবহার করা যায়:
async function printCookies() { try { const cookies = await retrieveCookies(); console.log(cookies); } catch(error) { console.log(error); } } printCookies();
এখানেও একই এরর প্রিন্ট হবে। await Promise সফল হয় কিনা চেক করে, না হলে catch ব্লক এক্সিকিউট হয়।
উপসংহার
async/await ফাংশন আপনাকে অ্যাসিনক্রোনাস অপারেশন লিখতে সাহায্য করে। async ফাংশন ডিক্লেয়ার করলে await কীওয়ার্ড দিয়ে অপারেশন রিজল্ট হওয়া পর্যন্ত অপেক্ষা করা যায়। await অবশ্যই Promise রিটার্ন করার ফাংশনের সাথে ব্যবহার করতে হবে।
এখন আপনি একজন এক্সপার্টের মতো জাভাস্ক্রিপ্ট async/await ফাংশন ব্যবহার করতে পারবেন!
