জাভাস্ক্রিপ্ট অ্যাসিঙ্ক অপেক্ষা বনাম প্রতিশ্রুতি তারপর: বাস্তব উদাহরণ সহ সম্পূর্ণ গাইড

{
“@context”: “https://schema.org”,
“@type”: “TechArticle”,
“headline”: “জাভাস্ক্রিপ্ট অ্যাসিঙ্ক অপেক্ষা বনাম প্রতিশ্রুতি তারপর: বাস্তব উদাহরণ সহ সম্পূর্ণ গাইড”,
“description”: “Async/await বনাম Promise.then সিনট্যাক্স, কখন প্রতিটি ব্যবহার করতে হবে এবং প্রতিটি বাস্তব-বিশ্বের প্যাটার্ন কভার করে কোড উদাহরণ সহ সাধারণ ত্রুটিগুলি বুঝুন।”,
“url”: “https://techpulsesite.com/javascript-async-await-vs-promise-then-c-bn/”,
“datePublished”: “2026-06-24T17:20:00+00:00”,
“dateModified”: “2026-06-29T04:14:49+00:00”,
“author”: {
“@type”: “Organization”,
“name”: “TechPulse Editorial Team”,
“url”: “https://techpulsesite.com”
},
“publisher”: {
“@type”: “Organization”,
“name”: “TechPulse”,
“url”: “https://techpulsesite.com”
},
“inLanguage”: “bn”
}

{
“@context”: “https://schema.org”,
“@type”: “TechArticle”,
“headline”: “জাভাস্ক্রিপ্ট অ্যাসিঙ্ক অপেক্ষা বনাম প্রতিশ্রুতি তারপর: বাস্তব উদাহরণ সহ সম্পূর্ণ গাইড”,
“description”: “Async/await বনাম Promise.then সিনট্যাক্স, কখন প্রতিটি ব্যবহার করতে হবে এবং প্রতিটি বাস্তব-বিশ্বের প্যাটার্ন কভার করে কোড উদাহরণ সহ সাধারণ ত্রুটিগুলি বুঝুন।”,
“url”: “https://techpulsesite.com/javascript-async-await-vs-promise-then-c-bn/”,
“datePublished”: “2026-06-24T17:20:00+00:00”,
“dateModified”: “2026-06-21T05:56:52+00:00”,
“author”: {
“@type”: “Organization”,
“name”: “TechPulse Editorial Team”,
“url”: “https://techpulsesite.com”
},
“publisher”: {
“@type”: “Organization”,
“name”: “TechPulse”,
“url”: “https://techpulsesite.com”
},
“inLanguage”: “bn”
}

জাভাস্ক্রিপ্টেরasync/অপেক্ষা এবংপ্রতিশ্রুতি. তারপর() উভয়ই অ্যাসিঙ্ক্রোনাস ক্রিয়াকলাপ পরিচালনা করে — তবে তাদের বিভিন্ন শক্তি, বিভিন্ন পঠনযোগ্য প্রোফাইল এবং বিভিন্ন ত্রুটি-হ্যান্ডলিং প্যাটার্ন রয়েছে। বাস্তব কোড উদাহরণ সহ প্রতিটি কখন ব্যবহার করবেন এই নির্দেশিকাটি কভার করে।

আমরা কি সমস্যা সমাধান করছি?

জাভাস্ক্রিপ্ট একক-থ্রেডেড কিন্তু অসিঙ্ক্রোনাসভাবে I/O পরিচালনা করে। অ্যাসিঙ্ক অপারেশনগুলির জন্য “অপেক্ষা” করার উপায় ছাড়াই, আপনি কলব্যাক হেল পাবেন — নেস্টেড ফাংশন যা পড়া এবং বজায় রাখা অসম্ভব৷ প্রতিশ্রুতি এটি সমাধান করেছে। async/await এটিকে সিঙ্ক্রোনাস দেখায়। দুটোই বোঝা জরুরি।

প্রতিশ্রুতি. তারপর() সিনট্যাক্স

// Basic promise chain
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(users => {
    console.log(users);
    return fetch(`/api/posts/${users[0].id}`);
  })
  .then(response => response.json())
  .then(posts => console.log(posts))
  .catch(error => console.error('Error:', error))
  .finally(() => console.log('Done'));

প্রতিশ্রুতি চেইন সহজ রৈখিক প্রবাহের জন্য পাঠযোগ্য। প্রতিটি.then() পূর্ববর্তী ধাপ থেকে সমাধানকৃত মান গ্রহণ করে।

async/await সিনট্যাক্স

// Same logic with async/await
async function fetchUserPosts() {
  try {
    const userResponse = await fetch('https://api.example.com/users');
    const users = await userResponse.json();

    const postsResponse = await fetch(`/api/posts/${users[0].id}`);
    const posts = await postsResponse.json();

    console.log(posts);
  } catch (error) {
    console.error('Error:', error);
  } finally {
    console.log('Done');
  }
}

fetchUserPosts();

async/await ত্রুটির জন্য নিয়মিত চেষ্টা/ক্যাচ ব্যবহার করে এবং সিঙ্ক্রোনাস কোডের মতো টপ-টু-বটম পড়ে — জটিল যুক্তির জন্য অনুসরণ করা অনেক সহজ।

পাশে-পাশে: কোনটি বেশি পাঠযোগ্য?

সমান্তরালভাবে চলমান অপারেশন

// WRONG: These run sequentially (slow)
async function slowFetch() {
  const users = await fetchUsers();    // waits 500ms
  const posts = await fetchPosts();    // then waits 500ms = 1000ms total
}

// RIGHT: Run in parallel with Promise.all
async function fastFetch() {
  const [users, posts] = await Promise.all([
    fetchUsers(),   // both start at same time
    fetchPosts()    // total: ~500ms
  ]);
  return { users, posts };
}

// Promise.then() approach for parallel:
Promise.all([fetchUsers(), fetchPosts()])
  .then(([users, posts]) => ({ users, posts }))
  .catch(console.error);

ত্রুটি হ্যান্ডলিং প্যাটার্নস

// async/await: catch specific errors
async function getUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    if (error.message.includes('HTTP error: 404')) {
      return null; // user not found
    }
    throw error; // rethrow unexpected errors
  }
}

// Promise.then(): chain error catching
fetch(`/api/users/${id}`)
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  })
  .catch(error => {
    if (error.message.includes('404')) return null;
    throw error;
  });

এড়ানোর জন্য সাধারণ ভুলগুলি

1. ভুলে যাওয়া অপেক্ষা: const data = fetch(url) আপনাকে একটি প্রতিশ্রুতি বস্তু দেয়, ডেটা নয়। সর্বদাawait এটা
2. ভিতরে অপেক্ষা করুন . তারপর(): আপনি ব্যবহার করতে পারবেন নাawait একটি নিয়মিত কলব্যাকের ভিতরে। কলব্যাকটিকেasync.
3. হিসেবে চিহ্নিত করুন৷ সমান্তরাল পরিবর্তে সিরিয়াল: অনুক্রমিকawait কল যখন অপারেশন স্বাধীন হয়। ব্যবহার করুনPromise.all().
4. ভুল হ্যান্ডলিং ভুলে যাওয়া: ধরা না পড়া প্রতিশ্রুতি প্রত্যাখ্যান Node.js প্রসেস ক্র্যাশ করে এবং ব্রাউজারে লাল ত্রুটি দেখায়।
5. ইভেন্ট লুপ ব্লক করা: await ফাংশন স্থগিত করে, পুরো থ্রেড নয়। অন্যান্য কোড এখনও চলে।

রিয়েল-ওয়ার্ল্ড প্যাটার্ন: API সার্ভিস ক্লাস

class ApiService {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
  }

  async request(endpoint, options = {}) {
    const response = await fetch(`${this.baseUrl}${endpoint}`, {
      headers: { 'Content-Type': 'application/json', ...options.headers },
      ...options
    });
    if (!response.ok) throw new Error(`API Error: ${response.status}`);
    return response.json();
  }

  async getUser(id)           { return this.request(`/users/${id}`); }
  async createPost(data)      { return this.request('/posts', { method: 'POST', body: JSON.stringify(data) }); }
  async updatePost(id, data)  { return this.request(`/posts/${id}`, { method: 'PUT', body: JSON.stringify(data) }); }
}

প্রায়শই জিজ্ঞাসিত প্রশ্ন

প্রশ্ন: অ্যাসিঙ্ক/অপেক্ষা কি শুধুই সিনট্যাকটিক চিনির প্রতিশ্রুতি?
উঃ হ্যাঁ। ফণার নিচে,async ফাংশন প্রতিশ্রুতি প্রদান করে এবংawait প্রতিশ্রুতি সমাধান না হওয়া পর্যন্ত মৃত্যুদন্ড স্থগিত করে। তারা পুরানো পরিবেশে একই জিনিস কম্পাইল.

প্রশ্ন: আমি কি একই কোডবেসে async/await এবং .then() মিশ্রিত করতে পারি?
উত্তর: হ্যাঁ, এবং কখনও কখনও এটি উপযুক্ত। একটি ইউটিলিটি ফাংশন একটি প্রতিশ্রুতি প্রদান করতে পারে; একটি উপাদান এটি কল করার জন্য async/await ব্যবহার করে। ফাংশন মধ্যে সামঞ্জস্যপূর্ণ হন.

প্রশ্ন: 2026 সালে সমস্ত ব্রাউজারে কি অ্যাসিঙ্ক/অপেক্ষা কাজ করে?
উঃ হ্যাঁ। সমস্ত আধুনিক ব্রাউজার স্থানীয়ভাবে অ্যাসিঙ্ক/ওয়েট সমর্থন করে। আপনি IE11 সমর্থন না করা পর্যন্ত কোন ট্রান্সপিলেশনের প্রয়োজন নেই (যা আপনার 2026 সালে করা উচিত নয়)।

প্রশ্ন: স্ট্রিমিংয়ের জন্য অ্যাসিঙ্ক জেনারেটর সম্পর্কে কী?
A: for await...of অ্যাসিঙ্ক জেনারেটরের সাথে স্ট্রিমিং প্রতিক্রিয়াগুলি পরিচালনা করার জন্য দুর্দান্ত। খণ্ডিত ডেটার জন্য Fetch API এর Readable Stream এর সাথে এটি ব্যবহার করুন।

প্রশ্নঃ আমি নতুনদের কোনটি শেখাবো?
উত্তর: প্রথমে প্রতিশ্রুতি ধারণাগুলি শেখান যাতে তারা বুঝতে পারে কী ঘটছে, তারপর পছন্দের বাক্য গঠন হিসাবে async/await শেখান৷ প্রতিশ্রুতি বোঝা ডিবাগিং অ্যাসিঙ্ক/অপেক্ষা অনেক সহজ করে তোলে।

উপসংহার

2026 সালে,async/await হল ডিফল্ট পছন্দ নতুন কোডের জন্য — এটি আরও পঠনযোগ্য, ডিবাগ করা সহজ এবং চেষ্টা/ক্যাচের সাথে স্বাভাবিকভাবে কাজ করে। ব্যবহার করুনPromise.then() যখন চেইনিং পরিষ্কার হয় (সাধারণ রূপান্তর) বা যখন আপনার সূক্ষ্ম-দানাযুক্ত নিয়ন্ত্রণের প্রয়োজন যেমনPromise.race() এবংPromise.allSettled(). উভয় দক্ষতাই প্রয়োজনীয় — অ্যাসিঙ্ক জাভাস্ক্রিপ্ট আয়ত্ত করা যেকোনো আধুনিক জাভাস্ক্রিপ্ট বিকাশকারীর জন্য অ-আলোচনাযোগ্য।