Async/Await এবং প্রমিজ হ্যান্ডলিং

Async/Await এবং প্রমিজ হল JavaScript এর দুইটি গুরুত্বপূর্ণ ফিচার যা অ্যাসিঙ্ক্রোনাস কোড লেখার সময় কাজের গতি বাড়াতে এবং কোডকে আরো পড়তে সহজ করতে সহায়তা করে। Vue.js এ এগুলোর ব্যবহার খুবই সাধারণ, বিশেষ করে যখন আপনাকে অ্যাসিঙ্ক্রোনাস অপারেশন (যেমন API কল, ডেটা ফেচিং, ইত্যাদি) পরিচালনা করতে হয়।

১. প্রমিজ (Promise) হ্যান্ডলিং

প্রমিজ একটি অবজেক্ট যা অ্যাসিঙ্ক্রোনাস অপারেশন সম্পন্ন হওয়ার পরে তার ফলাফল বা ত্রুটি প্রদান করে। যখন আপনি কোনো প্রমিজ তৈরি করেন, তখন সেটি তিনটি অবস্থায় থাকতে পারে:

1. Pending: প্রমিজটি এখনও সম্পন্ন হয়নি।
2. Resolved (Fulfilled): প্রমিজ সফলভাবে সম্পন্ন হয়েছে।
3. Rejected: প্রমিজটি ব্যর্থ হয়েছে।

প্রমিজের উদাহরণ:

let promise = new Promise(function(resolve, reject) {
  let success = true;
  
  if (success) {
    resolve("Data fetched successfully");
  } else {
    reject("Error fetching data");
  }
});

promise
  .then(function(value) {
    console.log(value);  // "Data fetched successfully"
  })
  .catch(function(error) {
    console.log(error);  // "Error fetching data"
  });

এখানে resolve() যখন সফল হয়, তখন .then() কল হয় এবং reject() হলে .catch() কল হয়।

২. Async/Await

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

Async/Await এর উদাহরণ:

async function fetchData() {
  let promise = new Promise(function(resolve, reject) {
    setTimeout(() => resolve("Data fetched successfully"), 2000);
  });
  
  let result = await promise;  // Wait until the promise resolves
  console.log(result);  // "Data fetched successfully"
}

fetchData();

এখানে await ব্যবহারের মাধ্যমে আমরা প্রমিজের ফলাফল পর্যন্ত অপেক্ষা করছি এবং এর পরে result ভেরিয়েবলটি ব্যবহার করছি।

৩. Vue.js এ Async/Await এবং প্রমিজ হ্যান্ডলিং

Vue.js অ্যাপ্লিকেশনগুলিতে সাধারণত API কল করার জন্য অ্যাসিঙ্ক্রোনাস অপারেশন ব্যবহৃত হয়, এবং এ ক্ষেত্রে Async/Await এবং প্রমিজ ব্যবহার করা হয়। এখানে একটি Vue কম্পোনেন্টের মধ্যে API কল করার উদাহরণ দেওয়া হলো:

উদাহরণ: Vue.js এবং Async/Await

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Waiting for data...'
    };
  },
  methods: {
    async fetchData() {
      try {
        this.message = 'Loading...';
        
        // API কল করা হচ্ছে
        let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        let data = await response.json();
        
        this.message = data.title;  // ফেচ করা ডেটা UI তে প্রদর্শন
      } catch (error) {
        this.message = 'Error fetching data';
        console.error(error);
      }
    }
  }
};
</script>

এখানে:

• fetchData() মেথডটি অ্যাসিঙ্ক্রোনাস এবং await ব্যবহার করে API কলটি সম্পন্ন করছে।
• API থেকে ডেটা পাওয়ার পর, message প্রপার্টি আপডেট হচ্ছে এবং UI তে সেই ডেটা প্রদর্শিত হচ্ছে।
• যদি কোনো ত্রুটি হয়, তবে catch ব্লকটি কল হবে এবং ব্যবহারকারীকে ত্রুটির বার্তা দেখানো হবে।

৪. প্রমিজ চেইনিং (Promise Chaining) এবং Async/Await এর পার্থক্য

প্রমিজ চেইনিং:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => {
    console.log(data.title);
  })
  .catch(error => {
    console.error(error);
  });

Async/Await:

async function fetchData() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    let data = await response.json();
    console.log(data.title);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

• প্রমিজ চেইনিং: এটি একটি অপেক্ষাকৃত পুরনো পদ্ধতি যেখানে .then() এবং .catch() ব্যবহার করে প্রমিজের ফলাফল বা ত্রুটি হ্যান্ডেল করা হয়।
• Async/Await: এটি আরও সহজ এবং পাঠযোগ্য, কারণ এটি সিঙ্ক্রোনাস কোডের মত দেখতে, তবে বাস্তবে অ্যাসিঙ্ক্রোনাস অপারেশন হ্যান্ডল করে।

৫. Error Handling

প্রমিজ এবং Async/Await উভয়েই Error Handling করার জন্য .catch() এবং try-catch ব্লক ব্যবহার করে। try-catch ব্যবহার করে আমরা প্রমিজের ফলাফল পাওয়ার পরও কোনো ত্রুটি হ্যান্ডল করতে পারি, এবং এতে অ্যাসিঙ্ক্রোনাস কোডটি আরও পরিষ্কার হয়ে ওঠে।

Error Handling উদাহরণ:

async function fetchData() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/invalid');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

এখানে:

• try-catch ব্লক ব্যবহার করা হয়েছে যাতে যদি কোনো ত্রুটি হয়, তবে তা সুন্দরভাবে হ্যান্ডল করা যায়।

সারাংশ

• প্রমিজ হল একটি অবজেক্ট যা অ্যাসিঙ্ক্রোনাস অপারেশনগুলির ফলাফল ধারণ করে এবং .then() এবং .catch() ব্যবহার করে তা হ্যান্ডল করা হয়।
• Async/Await হল একটি সিঙ্ক্রোনাস সিনট্যাক্স যা প্রমিজের সাথে কাজ করে এবং কোড লেখার সময়কে পরিষ্কার এবং সহজ করে তোলে।
• Vue.js এ Async/Await এবং প্রমিজ ব্যবহার করে আপনি API কল এবং অন্যান্য অ্যাসিঙ্ক্রোনাস অপারেশন হ্যান্ডল করতে পারেন, যা অ্যাপ্লিকেশনকে দ্রুত এবং কার্যকরী করে তোলে।