async/await — promise-এর কোড সহজে লেখা আর ভুল সামলানো

১ · async/await কেন — promise-এর কোডকে সাধারণ কোডের মতো পড়া

পর্ব ৩৩-এ একটি অর্ডারের কাজ promise-এর শিকল দিয়ে লিখেছিলেন — কার্ট যাচাই, স্টক রাখা, টাকা কাটা, SMS পাঠানো। কোডটা কাজ করে, কিন্তু পড়তে গেলে চোখকে .then থেকে .then-এ লাফাতে হয়। আর কোনো এক ধাপের ফল যদি তিন ধাপ পরে লাগে, তখন সেটা বাইরের কোনো variable-এ রেখে দিতে হয়, বা শিকলের ভেতরে আরেকটা শিকল বানাতে হয়:

function placeOrder(cart) {
  let reservation;
  return validateCart(cart)
    .then(() => reserveStock(cart))
    .then((r) => { reservation = r; return charge(cart.total); })
    .then((txn) => sendSms(cart.phone, `রসিদ ${txn}, স্টক ${reservation.id}`))
    .catch((err) => { showMessage("অর্ডার নেওয়া যায়নি"); throw err; });
}

একই কাজ async/await দিয়ে:

async function placeOrder(cart) {
  try {
    await validateCart(cart);
    const reservation = await reserveStock(cart);
    const txn = await charge(cart.total);
    await sendSms(cart.phone, `রসিদ ${txn}, স্টক ${reservation.id}`);
  } catch (err) {
    showMessage("অর্ডার নেওয়া যায়নি");
    throw err;
  }
}

দুটি কোড হুবহু একই কাজ করে, একই promise তৈরি করে, একই সময় নেয়। পার্থক্য শুধু মানুষের চোখে: দ্বিতীয়টি ঠিক সেই ক্রমে পড়া যায় যে ক্রমে ঘটনা ঘটে। প্রতিটি ধাপের ফল একটি সাধারণ const-এ থাকে, আর ভুল ধরা হয় পর্ব ২৯-এর চেনা try/catch দিয়ে।

২ · async function — যা-ই করুক, ফেরত দেয় একটি promise

কোনো function-এর আগে async লিখলে তিনটি জিনিস বদলায়:

• ফেরত মান promise-এ মোড়ানো হয়। async function f() { return 5; } — f() ডাকলে 5 পাবেন না, পাবেন একটি promise, যা 5 দিয়ে পূর্ণ। মান পেতে হয় await f(), নয়তো f().then(...).
• throw মানে ব্যর্থ promise. ভেতরে error ছোড়া হলে সেটি ডাকার জায়গায় সাথে সাথে ছিটকে আসে না — ফেরত দেওয়া promise-টি সেই error দিয়ে rejected হয়। তাই f() ডাকার চারপাশে সাধারণ try/catch কিছুই ধরবে না, যদি না আপনি await করেন।
• ভেতরে await লেখা যায়। সাধারণ function-এ await লিখলে SyntaxError: await is only valid in async functions and the top level bodies of modules (V8-এর বার্তা)।

আর যদি async function নিজেই একটি promise ফেরত দেয়? তখন বাড়তি মোড়ক হয় না — বাইরের promise ভেতরেরটির ফল অনুসরণ করে। promise-এর ভেতরে promise কখনো আপনার হাতে আসে না।

await-এর ডান পাশে কী থাকতে পারে

সাধারণত একটি promise. কিন্তু যেকোনো মানই দেওয়া যায়: await 5 লিখলে মানটি আগে একটি পূর্ণ promise-এ মোড়ানো হয়, তারপর অপেক্ষা। ফলে 5-ই পাবেন, কিন্তু সাথে সাথে নয় — function তবুও এক মুহূর্তের জন্য থামে, আর বাকি কাজ পরে একটি microtask হিসেবে চলে। আর যে object-এর একটি then method আছে (thenable, যেমন পুরোনো library-র promise), await সেটাকেও promise-এর মতো সামলায়।

কোন কোন রূপে লেখা যায়

async function loadUser(id) { /* ... */ }            // declaration
const loadCart = async function () { /* ... */ };   // expression
const loadOffers = async () => { /* ... */ };         // async arrow function
const shop = {
  async loadMenu() { /* ... */ },                     // object-এর method
};
class Api {
  async get(path) { /* ... */ }                       // class-এর method
  static async create() { /* ... */ }                 // static method
}
button.addEventListener("click", async () => { /* ... */ });

একটি জায়গায় async চলে না: class-এর constructor. async constructor() লিখলে V8 বলে SyntaxError: Class constructor may not be an async method. কারণ new সবসময় তৈরি হওয়া object-টিই ফেরত দেয়, promise নয়। সমাধান অংশ ৭-এ।

৩ · await কী থামায়, কী থামায় না — ধাপে ধাপে

async/await বোঝার সবচেয়ে বড় বাধা একটি ভুল ধারণা: “await মানে প্রোগ্রাম এখানে দাঁড়িয়ে থাকে।” না। নিচের ডায়াগ্রামে একটি async function দুবার await করে। খেয়াল করুন কোন log কখন আসে। (wait(ms, value) একটি ছোট সাহায্যকারী function — ms মিলিসেকেন্ড পর value দিয়ে পূর্ণ হয় এমন promise দেয়, নিচের চালানো যায় এমন কোডে আছে।)

1async function loadProfile() {2  console.log("২. profile আনা শুরু");3  const user = await wait(50, "রিনা");4  console.log("৫. user এল:", user);5  const orders = await wait(30, 3);6  console.log("৬. অর্ডার এল:", orders);7  return `${user}: ${orders}টি অর্ডার`;8}9console.log("১. শুরু");10const job = loadProfile();11console.log("৩. বাকি প্রোগ্রাম চলছে, job হলো:", job);12setTimeout(() => console.log("৪. অন্য একটি টাইমার (২০ms)"), 20);13job.then((text) => console.log("৭. ফল:", text));

এবার নিজে চালিয়ে মিলিয়ে নিন। wait-এর বিলম্বগুলো (২০, ৫০, ৩০ ms) আলাদা রাখা হয়েছে, যাতে ক্রম প্রতিবার একই আসে:

const wait = (ms, value) =>
  new Promise((resolve) => setTimeout(() => resolve(value), ms));

async function loadProfile() {
  console.log("২. profile আনা শুরু");
  const user = await wait(50, "রিনা");      // এখানে থামে, বাকিরা চলে
  console.log("৫. user এল:", user);
  const orders = await wait(30, 3);         // আবার থামে
  console.log("৬. অর্ডার এল:", orders);
  return `${user}: ${orders}টি অর্ডার`;
}

console.log("১. শুরু");
const job = loadProfile();
console.log("৩. বাকি প্রোগ্রাম চলছে, job হলো:", job);
setTimeout(() => console.log("৪. অন্য একটি টাইমার (২০ms)"), 20);
job.then((text) => console.log("৭. ফল:", text));

৪ · ভুল সামলানো — try, catch, finally আবার কাজে

পর্ব ২৯-এ দেখেছিলেন, setTimeout-এর callback-এ ছোড়া error বাইরের try/catch ধরতে পারে না, কারণ callback চলে পরে, অন্য call stack-এ। promise-এর .catch এই সমস্যার একটি সমাধান। await আরেকটি, আরও স্বাভাবিক সমাধান দেয়: await করা promise ব্যর্থ হলে, await-এর লাইনেই error ছোড়া হয়। function তখনো চালু, তার try block তখনো সক্রিয় — তাই চেনা catch ধরে ফেলে।

একটি চেকআউট — ব্যবহারকারীকে স্পষ্ট বার্তা

অনলাইন দোকানের চেকআউট বাটন চাপলে চারটি ধাপ: কার্ট যাচাই → স্টক আলাদা রাখা → কার্ড থেকে টাকা কাটা → SMS-এ রসিদ। কোথায় ব্যর্থ হলো, তার ওপর নির্ভর করে ব্যবহারকারীকে আলাদা কথা বলতে হয়:

async function onCheckoutClick(cart) {
  button.disabled = true;
  try {
    await validateCart(cart);                    // ভুল হলে ValidationError
    const hold = await reserveStock(cart);
    const txn = await charge(cart.total);        // ভুল হলে PaymentError
    sendReceiptSms(cart.phone, txn).catch(logError);   // ব্যর্থ হলেও অর্ডার বাতিল নয়
    showMessage(`অর্ডার সফল! রসিদ নম্বর ${txn}`);
  } catch (err) {
    if (err instanceof ValidationError) showMessage(err.message);
    else if (err instanceof PaymentError) showMessage("পেমেন্ট হয়নি — আপনার টাকা কাটা হয়নি");
    else { showMessage("সমস্যা হয়েছে, একটু পরে আবার চেষ্টা করুন"); logError(err); }
  } finally {
    button.disabled = false;                     // সফল হোক বা ব্যর্থ
  }
}

লক্ষ করুন SMS-এর লাইনটি। রসিদের SMS না গেলে অর্ডার বাতিল হওয়া উচিত নয়, আর এর জন্য ব্যবহারকারীকে অপেক্ষাও করাতে চাই না। তাই এখানে ইচ্ছা করে await নেই — কিন্তু .catch(logError) আছে। এই পার্থক্য অংশ ৭-এ আবার আসবে। finally নিশ্চিত করে যে বাটন আবার চালু হবেই, কোন পথে বের হলেন তাতে কিছু যায় আসে না।

প্রতি ধাপে আলাদা catch, নাকি সবার জন্য একটি?

ছোট আলাদা catch-এর একটি সহজ রূপ হলো await-এর সাথে সরাসরি .catch লাগানো: const offers = await loadOffers().catch(() => []); — অফার আনা ব্যর্থ হলে খালি তালিকা। async/await আর then/catch একই promise-এর দুই রূপ, তাই এভাবে মেশানো সম্পূর্ণ বৈধ। কিন্তু একই function-এ এলোমেলোভাবে দুই ধাঁচ মেশালে পড়া কঠিন হয় — ছোট, এক লাইনের fallback ছাড়া একটি ধাঁচই রাখুন।

প্রসঙ্গ যোগ করুন, আসলটা রেখে দিন

নিচু স্তরের error (“connection reset”) ওপরের স্তরে প্রায়ই অর্থহীন। পর্ব ২৯-এর মতো cause দিয়ে মুড়ে দিন: throw new Error("অর্ডার #৫১২ সেভ হয়নি", { cause: err }). log-এ তখন দুটোই থাকে — কী করতে গিয়ে ব্যর্থ, আর আসল কারণ কী।

৫ · লুপে await-এর ফাঁদ — একটার পর একটা, নাকি একসাথে?

একটি অ্যাডমিন dashboard খুললে তিনটি widget লোড হয়: আজকের বিক্রি, স্টক, নতুন বার্তা। তিনটি আলাদা API, কেউ কারও ওপর নির্ভর করে না। ধরুন প্রতিটি ১০০ ms নেয়। সবচেয়ে স্বাভাবিকভাবে লেখা কোড কত সময় নেবে?

1// ক) একটার পর একটা2const sales = await getSales();   // ১০০ ms3const stock = await getStock();   // ১০০ ms4const msgs  = await getMsgs();    // ১০০ ms5// খ) একসাথে শুরু, একসাথে অপেক্ষা6const [s, t, m] = await Promise.all([7  getSales(), getStock(), getMsgs(),8]);

এই একই ফাঁদ লুপে আরও বড় হয়ে দেখা দেয়। ২০০টি অর্ডারের ডেলিভারি স্ট্যাটাস আনতে হবে:

// ধীর: প্রতিটি অনুরোধ আগেরটি শেষ হওয়ার পর শুরু হয়
const statuses = [];
for (const id of orderIds) {
  statuses.push(await getStatus(id));
}

// দ্রুত: সব একসাথে শুরু, তারপর একবার অপেক্ষা
const statuses2 = await Promise.all(orderIds.map((id) => getStatus(id)));

map প্রতিটি id-এর জন্য function ডাকে আর ফেরত আসা promise-গুলো দিয়ে একটি array বানায় — ডাকার মুহূর্তেই প্রতিটি অনুরোধ চলে যায়। তারপর Promise.all সবগুলোর জন্য একসাথে অপেক্ষা করে।

কখন একটার পর একটাই ঠিক

“সবসময় Promise.all” নিয়মও ভুল। তিনটি ক্ষেত্রে ধারাবাহিক await-ই সঠিক:

• পরের ধাপ আগের ফলের ওপর নির্ভর করে। চেকআউটে টাকা কাটার আগে স্টক নিশ্চিত হতে হবে; user-এর id না পেলে তার অর্ডার আনা যায় না। এখানে ক্রমটাই যুক্তি।
• সার্ভারের সীমা আছে (rate limit). SMS gateway যদি সেকেন্ডে ১০টির বেশি অনুরোধ নেয় না, ২০০০টি অনুরোধ একসাথে পাঠালে বেশিরভাগই ফেরত আসবে 429 Too Many Requests দিয়ে। নিজের ডেটাবেসও একসাথে হাজার query-তে হাঁপিয়ে উঠতে পারে।
• ক্রম নিজেই জরুরি। একই অ্যাকাউন্টে টাকা জমা আর তোলা — ক্রম বদলালে মাঝখানে ব্যালান্স ঋণাত্মক হতে পারে।

মাঝামাঝি পথও আছে: তালিকাকে ১০টি করে ভাগ করুন, প্রতিটি ভাগ Promise.all দিয়ে, ভাগগুলো একটার পর একটা। একসাথে সর্বোচ্চ কয়টি চলবে, সেটা নিয়ন্ত্রণ করা — একে বলে concurrency-র সীমা — বড় প্রজেক্টে p-limit-এর মতো ছোট library দিয়ে করা হয়।

allSettled আর race — await-এর সাথে

dashboard-এ একটি widget ব্যর্থ হলে পুরো পাতা খালি দেখানো খারাপ অভিজ্ঞতা। Promise.allSettled (ES2020) কখনো reject হয় না — প্রতিটি promise-এর ফল { status: "fulfilled", value } বা { status: "rejected", reason } আকারে দেয়:

const results = await Promise.allSettled([getSales(), getStock(), getMsgs()]);
results.forEach((r, i) => {
  if (r.status === "fulfilled") renderWidget(i, r.value);
  else renderWidgetError(i, "এই অংশ এখন লোড করা যায়নি");
});

// সময়সীমা: ৩ সেকেন্ডে উত্তর না এলে হাল ছাড়া
const timeout = (ms) => new Promise((_, reject) =>
  setTimeout(() => reject(new Error(`${ms} ms পেরিয়ে গেছে`)), ms));
const report = await Promise.race([getReport(), timeout(3000)]);

Promise.race যে promise আগে মীমাংসা হয় তার ফল নেয়। রিপোর্ট ৩ সেকেন্ডের মধ্যে এলে রিপোর্ট, না এলে timeout-এর error. তবে মনে রাখুন, race হারলেও getReport()-এর অনুরোধ পেছনে চলতেই থাকে — race শুধু অপেক্ষা থামায়, কাজ নয়। আসলেই বাতিল করার পরিষ্কার উপায় AbortController আর AbortSignal.timeout(), পর্ব ৩৬-এ।

এবার একটি পূর্ণ উদাহরণ চালিয়ে দেখুন — চেকআউট (সফল ও ব্যর্থ), cause দিয়ে মোড়ানো error, finally, আর তিনটি widget একসাথে। এই কোড block-টিতে data-module দেওয়া আছে, তাই এটি একটি module হিসেবে চলে আর একেবারে বাইরে (কোনো async function ছাড়া) await লেখা যায় — একে বলে top-level await, অংশ ৭-এ বিস্তারিত।

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
class PaymentError extends Error { name = "PaymentError"; }
async function charge(amount) {
  await delay(30);                           // ব্যাংকের উত্তরের অপেক্ষা (ভান)
  if (amount > 5000) throw new PaymentError("কার্ডের সীমা পেরিয়েছে");
  return "TXN-881";
}
async function checkout(total) {
  try {
    const txn = await charge(total);
    return `অর্ডার সফল, রসিদ ${txn}`;
  } catch (err) {
    throw new Error("পেমেন্ট হয়নি, টাকা কাটা হয়নি", { cause: err });
  } finally {
    console.log("বাটন আবার চালু");
  }
}
async function widget(name, ms) {
  console.log("শুরু:", name); await delay(ms); console.log("শেষ:", name);
  return name;
}
console.log(await checkout(450));            // top-level await — module বলে চলে
try { await checkout(9000); }
catch (err) { console.log(err.message, "| কারণ:", err.cause.name); }
console.log(await Promise.all([widget("বিক্রি", 60), widget("স্টক", 20), widget("বার্তা", 40)]));

৬ · forEach অপেক্ষা করে না — আর for await…of

অর্ডারগুলো একটি একটি করে সেভ করতে হবে। অনেকে প্রথমে লেখেন orders.forEach(async (id) => { await save(id); }), তারপর লেখেন “সব শেষ”. দেখতে নির্দোষ, কিন্তু এটি async/await-এর সবচেয়ে পরিচিত বাগগুলোর একটি। ধাপে ধাপে দেখুন (ধরা যাক save(101) নেয় ৩০ ms, save(102) নেয় ১০ ms):

1// ক) forEach2orders.forEach(async (id) => {3  await save(id);4  console.log("সেভ:", id);5});6console.log("সব শেষ");7// খ) for…of (async function-এর ভেতরে)8for (const id of orders) {9  await save(id);10  console.log("সেভ:", id);11}12console.log("সব শেষ");

একই সমস্যা আছে অন্য array method-এও: map একটি async callback পেলে মানের বদলে promise-এর array দেয় (তাই Promise.all দিয়ে মুড়তে হয়); filter-এর async predicate সবসময় একটি promise ফেরত দেয়, যা truthy — তাই কিছুই বাদ পড়ে না; reduce-এ accumulator হয়ে যায় promise. নিয়ম: array method-এ async callback দিলে ফেরত আসা promise-গুলো কে নিচ্ছে, সেটা জিজ্ঞেস করুন।

for await…of — যখন ডেটা নিজেই আসে ধীরে ধীরে

অনেক API সব ডেটা একবারে দেয় না, দেয় পাতায় পাতায় — “প্রথম ২০টি অর্ডার, আর পরের পাতার চিহ্ন”. পর্ব ২৭-এ দেখেছেন async generator (async function*) — যার ভেতরে await আর yield দুটোই চলে। সেটি দিয়ে পাতাগুলোকে একটি সাধারণ তালিকার মতো সাজানো যায়, আর for await…of (ES2018) প্রতিটি মানের জন্য অপেক্ষা করে একে একে দেয়:

// নকল API: প্রতিটি পাতায় কয়েকটি অর্ডার আর পরের পাতার নম্বর
async function fetchPage(page) {
  await delay(50);
  const pages = { 1: [[101, 102], 2], 2: [[103], 3], 3: [[104, 105], null] };
  const [items, next] = pages[page];
  return { items, next };
}

async function* allOrders() {
  let page = 1;
  while (page !== null) {
    const { items, next } = await fetchPage(page);   // পাতা আনা
    yield* items;                                      // এক এক করে দেওয়া
    page = next;
  }
}

for await (const id of allOrders()) {
  console.log("অর্ডার", id);          // 101, 102, 103 — তারপর break
  if (id === 103) break;               // break করলে পরের পাতা আর আনাই হয় না
}

সুবিধা দুটি। ব্যবহারকারীর কোড জানে না পাতা কয়টি — তার কাছে এটা শুধু একটি তালিকা। আর ডেটা আনা হয় শুধু যতটুকু লাগে: break করলে for await async iterator-এর return() ডাকে, generator থেমে যায়, পাতা ৩ আর কখনো চাওয়া হয় না। Node.js-এ ফাইলের লাইন পড়া আর stream-ও (পর্ব ৪৯) এভাবে পড়া যায়। মনে রাখুন: for await নিজেও await — এটি একটার পর একটা চলে, তাই স্বাধীন জিনিসের সাধারণ array-এর জন্য এটি দ্রুত পথ নয়।

৭ · আরও কিছু নিয়ম — return await, fire-and-forget, factory আর top-level await

return নাকি return await?

async function থেকে একটি promise ফেরত দেওয়ার সময় return p আর return await p — বেশিরভাগ ক্ষেত্রে একই ফল। কিন্তু try-এর ভেতরে পার্থক্যটা বড়:

async function a() {
  try {
    return failLater();     // ব্যর্থ হবে ১০ ms পরে
  } catch {
    return "a ধরল";
  }
}
→ promise-টি সাথে সাথে ফেরত গেল, try block এখানেই শেষ

a().then(v => console.log("a:", v),
         e => console.log("a rejected:", e.message));
→ a rejected: ব্যর্থ
// ১০ ms পরে promise ব্যর্থ হলো, কিন্তু a()-এর try অনেক আগেই শেষ।
// catch কখনো চলেনি — error সোজা ডাকার জায়গায়।

async function b() {
  try {
    return await failLater();   // এখানে থামে, try সক্রিয় থাকে
  } catch {
    return "b ধরল";
  }
}
→ function থেমে আছে try block-এর ভেতরে

async function b() {
  try {
    return await failLater();   // ← এখানে throw হলো
  } catch {
    return "b ধরল";
  }
}
→ b: b ধরল

Fire-and-forget — যে promise-এর কোনো অভিভাবক নেই

await বা .catch ছাড়া কোনো async function ডেকে চলে যাওয়াকে বলে fire-and-forget. কখনো এটা ইচ্ছাকৃত (রসিদের SMS, analytics) — তখনো একটি .catch লাগবেই। কিন্তু বেশিরভাগ সময় এটা দুর্ঘটনা: await লিখতে ভুলে যাওয়া। ফল তিন রকম হতে পারে — (১) কাজ শেষ হওয়ার আগেই পরের ধাপ চলে (“সেভ হয়েছে” দেখাল, অথচ হয়নি); (২) ব্যর্থ হলে unhandled rejection — ব্রাউজারে console-এ Uncaught (in promise), Node.js 15 থেকে ডিফল্টে পুরো process বন্ধ; (৩) শর্তে promise ঢুকে যাওয়া:

async function isCouponValid(code) { /* সার্ভারে যাচাই ... */ return false; }

if (isCouponValid("EID50")) {       // ভুল! promise একটি object — সবসময় truthy
  applyDiscount();                  // প্রতিটি কুপনে ছাড় পেয়ে যাবে সবাই
}
if (await isCouponValid("EID50")) { /* ঠিক */ }

Node.js-এ console.log(isCouponValid("EID50")) ছাপে Promise { false } — দেখলেই বোঝা যায় কিছু একটা ভুল। TypeScript-ঘেঁষা টুল এটা ধরতে পারে: typescript-eslint-এর no-floating-promises (অভিভাবকহীন promise) আর no-misused-promises (শর্তে promise) নিয়ম।

async constructor হয় না — static factory

একটি Database class, যার তৈরি হওয়ার সময় সংযোগ খুলতে হবে (async কাজ)। constructor async হতে পারে না, আর constructor-এর ভেতরে await ছাড়া promise চালালে অর্ধেক-প্রস্তুত object বেরিয়ে আসে। পরিচিত সমাধান static factory:

class Database {
  #conn;
  constructor(conn) { this.#conn = conn; }       // শুধু সাজানো, কোনো async কাজ নয়
  static async connect(url) {
    const conn = await openConnection(url);       // async প্রস্তুতি এখানে
    return new Database(conn);                    // সম্পূর্ণ প্রস্তুত object
  }
  async query(sql) { return this.#conn.run(sql); }
}
const db = await Database.connect("postgres://...");   // ফলে সবসময় প্রস্তুত db

Top-level await — শুধু module-এ

ES2022 থেকে একটি module-এর একেবারে বাইরের স্তরে, কোনো async function ছাড়াই, await লেখা যায় — একে বলে top-level await. config বা অনুবাদ-ফাইল লোড করে তারপর বাকি কোড চালানোর জন্য এটা খুব কাজের: const config = await loadConfig();. ব্রাউজারে <script type="module"> লাগে, Node.js-এ .mjs ফাইল বা "type": "module" (পর্ব ৪৫)। সাধারণ (classic) script-এ লিখলে SyntaxError. এই পাতার চালানো যায় এমন কোডে data-module attribute থাকলে runner সেটাকে module হিসেবে চালায় — অংশ ৫-এর উদাহরণটি তাই।

একটি দিক খেয়াল রাখার মতো: top-level await চলাকালীন যে module-গুলো এই module-কে import করে, তারা অপেক্ষা করে। তাই module-এর শুরুতে ধীর নেটওয়ার্ক অনুরোধ await করলে পুরো অ্যাপের শুরু ধীর হতে পারে। এই আশঙ্কা নিয়ে বিতর্কের গল্প ভাবনার প্রশ্ন ৪-এ।

৮ · async কোড ডিবাগ করা — stack trace আর DevTools

পর্ব ৩১-এ দেখেছেন, await-এর পরে function আবার চলে একটি খালি call stack-এ, microtask হিসেবে। তাহলে await-এর পরে error হলে stack trace-এ কে ডেকেছিল, তা দেখা যাবে কীভাবে? আগে দেখা যেত না — শুধু ভুলের লাইন, আর নিচে কিছু engine-এর ভেতরের নাম। আধুনিক V8 (Edge, Chrome, Node.js) await-এর শিকল ধরে পেছনের ডাকগুলো আবার সাজিয়ে দেয়, at async চিহ্ন দিয়ে — একে বলে async stack trace:

PaymentError: কার্ডের সীমা পেরিয়েছে
    at charge (checkout.js:5:29)
    at async checkout (checkout.js:10:17)
    at async onCheckoutClick (app.js:22:5)

শর্ত একটাই: শিকলের প্রতিটি ধাপে await থাকতে হবে। .then দিয়ে লেখা শিকল বা await ছাড়া ফেরত দেওয়া promise-এ (অংশ ৭-এর return p) ওই function stack-এ বাদ পড়ে যেতে পারে। কারণটা ভাবনার প্রশ্ন ৫-এ।

• Breakpoint আর step: DevTools-এর Sources প্যানেলে await-ওয়ালা লাইনে breakpoint দিন। “Step over” (F10) চাপলে debugger await পেরিয়ে পরের লাইনে থামে — মাঝে অন্য কাজ চললেও। Call Stack প্যানেলে async অংশ আলাদা করে দেখায়।
• Pause on exceptions: “Pause on caught exceptions” চালু করলে catch-এ ধরা পড়া ব্যর্থ promise-এর জায়গাতেও থামে — কোথায় কোন error চাপা পড়ছে, দেখার সেরা উপায় (পর্ব ২৯)।
• log-এ promise দেখলে সন্দেহ করুন: কোনো মানের জায়গায় Promise {<pending>} দেখা মানে প্রায় নিশ্চিতভাবে কোথাও await বাদ পড়েছে।
• সময় মাপুন, অনুমান নয়: Network প্যানেলের waterfall-এ অনুরোধগুলো সিঁড়ির মতো একটির পর একটি সাজানো থাকলে, সম্ভবত অংশ ৫-এর ফাঁদ — স্বাধীন অনুরোধ হলে সেগুলো পাশাপাশি থাকার কথা।

৯ · AI-এর যুগে — async কোডে AI-এর চেনা ভুল

AI-এর লেখা async কোড প্রায় সবসময় চলে, আর পরীক্ষার ছোট ডেটায় ঠিক ফলও দেয়। সমস্যা ধরা পড়ে পরে: ২০০টি অর্ডারে পাতা ২০ সেকেন্ড ঝুলে থাকে, “সেভ হয়েছে” দেখায় অথচ ডেটাবেসে কিছু নেই, বা ছাড়ের কুপন সবার জন্য খুলে যায়। এগুলো syntax-এর ভুল নয়, সময়ের ভুল — শুধু কোড পড়ে ধরতে হয়।

AI-এর লেখা async কোড — যাচাইয়ের চেকলিস্ট

• প্রতিটি async function-এর ডাকের সামনে await, নয়তো একটি সচেতন .catch আছে; কোনো if বা হিসাবে promise সরাসরি ঢুকছে না
• লুপের ভেতরের প্রতিটি await-এর জন্য জিজ্ঞেস করেছি: পরের ধাপ কি সত্যিই আগেরটির ফলের ওপর নির্ভর করে? না হলে Promise.all
• forEach/filter/reduce-এ async callback নেই; map-এ থাকলে Promise.all দিয়ে মোড়ানো
• try/catch সংখ্যায় কম, কিন্তু অর্থবহ — catch হয় সামলায়, নয়তো cause দিয়ে আবার ছোড়ে; try-এর ভেতরে return await
• একসাথে কয়টি অনুরোধ যাচ্ছে তার সীমা ভেবেছি (rate limit), আর timeout বা বাতিলের ব্যবস্থা আছে
• নিজে চালিয়ে দেখেছি: একটি অনুরোধ ইচ্ছা করে ব্যর্থ করে, আর DevTools-এর Network waterfall-এ দেখেছি অনুরোধগুলো পাশাপাশি নাকি সিঁড়ির মতো