জাভাস্ক্রিপ্ট অ্যাসিঙ্ক/অ্যাওয়েট

জাভাস্ক্রিপ্টে অ্যাসিঙ্ক/অ্যাওয়েট ব্যবহার করে কীভাবে অ্যাসিঙ্ক্রোনাস কোড লেখা যায়

জাভাস্ক্রিপ্ট
মধ্যম
১৫ মিনিট
2023-06-23
জাভাস্ক্রিপ্ট
অ্যাসিঙ্ক
অ্যাওয়েট
প্রমিস
ES8
জাভাস্ক্রিপ্ট অ্যাসিঙ্ক/অ্যাওয়েট

title: "জাভাস্ক্রিপ্ট অ্যাসিঙ্ক/অ্যাওয়েট" description: "জাভাস্ক্রিপ্টে অ্যাসিঙ্ক/অ্যাওয়েট ব্যবহার করে কীভাবে অ্যাসিঙ্ক্রোনাস কোড লেখা যায়" date: "2023-06-23" readTime: "১৫ মিনিট" difficulty: "মধ্যম" tags: ["জাভাস্ক্রিপ্ট", "অ্যাসিঙ্ক", "অ্যাওয়েট", "প্রমিস", "ES8"] featuredImage: "/placeholder.svg?height=400&width=800"

জাভাস্ক্রিপ্ট অ্যাসিঙ্ক/অ্যাওয়েট

ভূমিকা

জাভাস্ক্রিপ্ট প্রকৃতপক্ষে একটি সিঙ্গেল-থ্রেডেড প্রোগ্রামিং ভাষা, কিন্তু এটি অ্যাসিঙ্ক্রোনাস অপারেশন হ্যান্ডল করতে পারে। অ্যাসিঙ্ক্রোনাস অপারেশনগুলি ব্যাকগ্রাউন্ডে চলে যায় এবং সম্পন্ন হলে কোডের বাকি অংশ ব্লক না করেই ফলাফল দেয়। ES8 (2017) এ অ্যাসিঙ্ক/অ্যাওয়েট নামক অ্যাসিঙ্ক্রোনাস কোড লেখার একটি নতুন সিনট্যাক্স চালু করা হয়েছিল, যা প্রমিসের উপর ভিত্তি করে তৈরি করা হয়েছে।

প্রমিস রিমাইন্ডার

অ্যাসিঙ্ক/অ্যাওয়েট সম্পর্কে জানার আগে, প্রমিস সম্পর্কে একটু জানা প্রয়োজন। একটি প্রমিস হল একটি অবজেক্ট যা একটি অ্যাসিঙ্ক্রোনাস অপারেশনের সম্ভাব্য ফলাফল (বা এরর) উপস্থাপন করে। এটি তিনটি অবস্থা থাকতে পারে: পেন্ডিং, ফুলফিল্ড (রিজল্ভড) বা রিজেক্টেড।

// প্রমিস তৈরি
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("অপারেশন সফল হয়েছে!");
    } else {
      reject("কিছু ভুল হয়েছে!");
    }
  }, 1000);
});
 
// প্রমিস ব্যবহার
myPromise
  .then((result) => {
    console.log(result); // "অপারেশন সফল হয়েছে!"
  })
  .catch((error) => {
    console.error(error);
  });

অ্যাসিঙ্ক/অ্যাওয়েট কী?

অ্যাসিঙ্ক/অ্যাওয়েট হল প্রমিস-ভিত্তিক অ্যাসিঙ্ক্রোনাস ফাংশন লেখার জন্য একটি সিনট্যাকটিক সুগার। এটি প্রমিসের উপর ভিত্তি করে তৈরি, কিন্তু আরও সাধারণ, সহজ পঠনযোগ্য কোড লেখার সুযোগ দেয়, যা সিঙ্ক্রোনাস কোডের মত দেখায়।

অ্যাসিঙ্ক ফাংশন

async কীওয়ার্ডটি একটি ফাংশনকে অ্যাসিঙ্ক্রোনাস ফাংশনে পরিণত করে। একটি অ্যাসিঙ্ক ফাংশন সর্বদাই একটি প্রমিস রিটার্ন করে।

async function myAsyncFunction() {
  return "হ্যালো ওয়ার্ল্ড";
}
 
// এটি নিম্নলিখিত প্রমিস এর সমতুল্য:
function myPromiseFunction() {
  return Promise.resolve("হ্যালো ওয়ার্ল্ড");
}

অ্যাওয়েট অপারেটর

await কীওয়ার্ডটি শুধুমাত্র অ্যাসিঙ্ক ফাংশনের ভিতরে ব্যবহার করা যায় এবং একটি প্রমিসের সমাধান হওয়ার জন্য অপেক্ষা করে। এটি কোড এক্সিকিউশনকে ধরে রাখে যতক্ষণ না প্রমিস সমাধান হয় এবং তারপর সমাধানকৃত মানটি রিটার্ন করে।

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  return data;
}

অ্যাসিঙ্ক/অ্যাওয়েট এর সুবিধা

১. পঠনযোগ্যতা ও সহজতা

অ্যাসিঙ্ক/অ্যাওয়েট আপনার অ্যাসিঙ্ক্রোনাস কোডকে সিঙ্ক্রোনাস কোডের মত দেখতে এবং আচরণ করতে সাহায্য করে, যা বোঝা এবং লেখা সহজ করে তোলে।

প্রমিস ব্যবহার করে:

function fetchUserData() {
  return fetch("https://api.example.com/user")
    .then((response) => response.json())
    .then((user) => {
      return fetch(`https://api.example.com/posts?userId=${user.id}`);
    })
    .then((response) => response.json())
    .then((posts) => {
      return { user, posts };
    });
}

অ্যাসিঙ্ক/অ্যাওয়েট ব্যবহার করে:

async function fetchUserData() {
  const userResponse = await fetch("https://api.example.com/user");
  const user = await userResponse.json();
 
  const postsResponse = await fetch(
    `https://api.example.com/posts?userId=${user.id}`
  );
  const posts = await postsResponse.json();
 
  return { user, posts };
}

২. এরর হ্যান্ডলিং

try/catch ব্লক ব্যবহার করে এরর হ্যান্ডলিং আরও সহজ হয়, যা প্রমিসের .catch() মেথডের চেয়ে বেশি স্বজ্ঞাত:

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("ডাটা লোড করতে সমস্যা হয়েছে:", error);
    // এরর হ্যান্ডলিং লজিক
    throw error; // বা অন্য কোন কিছু রিটার্ন করতে পারেন
  }
}

৩. ডিবাগিং

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

প্রমিস vs অ্যাসিঙ্ক/অ্যাওয়েট পারফরম্যান্স

প্রমিস ও অ্যাসিঙ্ক/অ্যাওয়েট এর পারফরম্যান্স প্রায় একই, কারণ অ্যাসিঙ্ক/অ্যাওয়েট শেষ পর্যন্ত প্রমিসেই রূপান্তরিত হয়। যাইহোক, অ্যাসিঙ্ক/অ্যাওয়েট এ কিছু পারফরম্যান্স ওভারহেড থাকতে পারে, কিন্তু সাধারণত এই পার্থক্য অতি নগণ্য।

বাস্তব উদাহরণ

REST API কল

async function getUser(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
 
    if (!response.ok) {
      throw new Error(`HTTP এরর! স্টেটাস: ${response.status}`);
    }
 
    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error("ইউজার ডাটা লোড করতে সমস্যা হয়েছে:", error);
    throw error;
  }
}
 
// ব্যবহার
async function displayUserInfo() {
  try {
    const user = await getUser(123);
    document.getElementById("username").textContent = user.name;
    document.getElementById("email").textContent = user.email;
  } catch (error) {
    document.getElementById("error").textContent =
      "ইউজারের তথ্য লোড করতে সমস্যা হয়েছে।";
  }
}
 
displayUserInfo();

পর্যায়ক্রমিক বনাম পাশাপাশি অ্যাওয়েট

যখন একাধিক অ্যাসিঙ্ক অপারেশন একটি অন্যটির উপর নির্ভর করে না, তখন আমরা সেগুলিকে পাশাপাশি সম্পাদন করতে পারি:

// পর্যায়ক্রমিক - ধীর
async function sequential() {
  const first = await getDataFromAPI1();
  const second = await getDataFromAPI2();
  return [first, second];
}
 
// পাশাপাশি - দ্রুত
async function parallel() {
  const firstPromise = getDataFromAPI1();
  const secondPromise = getDataFromAPI2();
 
  const first = await firstPromise;
  const second = await secondPromise;
 
  return [first, second];
}
 
// অথবা আরও সংক্ষিপ্তভাবে:
async function parallelWithPromiseAll() {
  const [first, second] = await Promise.all([
    getDataFromAPI1(),
    getDataFromAPI2(),
  ]);
 
  return [first, second];
}

লুপে অ্যাসিঙ্ক/অ্যাওয়েট

দুটি প্রধান পদ্ধতি আছে:

সিকোয়েনশিয়াল প্রসেসিং (ধীর):

async function processItems(items) {
  const results = [];
 
  for (const item of items) {
    // প্রতিটি আইটেমের জন্য পূর্ববর্তী সম্পন্ন হওয়ার জন্য অপেক্ষা করে
    const result = await processItem(item);
    results.push(result);
  }
 
  return results;
}

প্যারালাল প্রসেসিং (দ্রুত):

async function processItems(items) {
  // সমস্ত প্রমিস একসাথে শুরু করে
  const promises = items.map((item) => processItem(item));
 
  // তারপর সমস্ত ফলাফলের জন্য অপেক্ষা করে
  const results = await Promise.all(promises);
  return results;
}

অ্যাসিঙ্ক/অ্যাওয়েট এর সীমাবদ্ধতা

১. পুরানো ব্রাউজারে সাপোর্ট

পুরনো ব্রাউজারে অ্যাসিঙ্ক/অ্যাওয়েট সাপোর্ট নেই। এই ক্ষেত্রে, আপনাকে Babel বা অনুরূপ ট্রান্সপাইলারস ব্যবহার করতে হবে।

২. টপ-লেভেল অ্যাওয়েট

অ্যাওয়েট অপারেটর শুধুমাত্র অ্যাসিঙ্ক ফাংশনের ভিতরেই ব্যবহার করা যায় (যদিও মডার্ন জাভাস্ক্রিপ্টে মডিউলের টপ লেভেলে অ্যাওয়েট ব্যবহার করার সাপোর্ট আসছে)।

৩. প্রমিস.অল / প্রমিস.রেস

প্রমিস-এর সব মেথড যেমন Promise.all(), Promise.race(), ইত্যাদি ব্যবহার করতে হলেও প্রমিস সিনট্যাক্স ব্যবহার করতে হবে।

বেস্ট প্র্যাকটিস

১. সবসময় এরর হ্যান্ডলিং করুন

async function fetchData() {
  try {
    // অ্যাসিঙ্ক কোড এখানে
  } catch (error) {
    // এরর হ্যান্ডলিং এখানে
  }
}

২. অ্যাসিঙ্ক ফাংশন সর্বদা প্রমিস রিটার্ন করে

আপনি যদি অ্যাসিঙ্ক ফাংশনের রিটার্ন ভ্যালু ব্যবহার করতে চান, তবে .then() বা অন্য একটি অ্যাসিঙ্ক ফাংশনে await ব্যবহার করে সেটা করতে হবে।

৩. স্ব-ক্রিয়াশীল অ্যাসিঙ্ক ফাংশন

যখন আপনি ফাংশন কল করতে চান এবং await করতে চান, কিন্তু চারপাশে অ্যাসিঙ্ক ফাংশন নেই:

(async () => {
  try {
    const result = await fetchData();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
})();

উপসংহার

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

মন্তব্য

মন্তব্য করার সুবিধা শীঘ্রই আসছে...