JSON, Async/Await ও Errors

সমস্যাটা কী?

অর্ডার সিস্টেম থেকে টেক্সট আসে {"id":"ORD-17","status":"shipped"}। কখনো কখনো ভাঙা টেক্সট আসে ({"id":"ORD-18",), আর পুরো পেজ crash করে। তার ওপর, সার্ভার উত্তর দিতে ২ সেকেন্ড নেয়—কোড কি এই সময় অন্য সব কাজ থামিয়ে বসে থাকবে?

শেখার লক্ষ্য

• JSON.stringify ও JSON.parse দিয়ে object ↔ টেক্সট রূপান্তর করতে পারবেন
• try/catch দিয়ে ভাঙা ইনপুট নিরাপদে সামলাতে এবং throw দিয়ে নিজের এরর তৈরি করতে পারবেন
• async function ও await দিয়ে Promise-ভিত্তিক কোড লিখতে এবং fixture বনাম আসল API-র পার্থক্য বলতে পারবেন

আনুমানিক সময়: 40 মিনিট

পূর্বশর্ত

• Loops, Modules ও Execution Flow

ব্যাখ্যা

JSON (JavaScript Object Notation): object/array-কে টেক্সটে লেখার নিয়ম। key সবসময় ডাবল কোটেশনে; string, number, boolean, null, array, object চলে; function বা undefined চলে না।

const order = { id: "ORD-17", items: 2, paid: true };
const text = JSON.stringify(order);   // object → টেক্সট
const back = JSON.parse(text);        // টেক্সট → object

এরর হ্যান্ডলিং (error handling): JSON.parse ভাঙা টেক্সট পেলে exception ছোড়ে (throw)। try { … } catch (err) { … } সেটি ধরে, যাতে প্রোগ্রাম থেমে না যায়। নিজেও throw new Error("বার্তা") দিয়ে এরর ছোড়া যায়—যেমন অর্ডার নম্বর খালি হলে।

প্রমিস (Promise): এমন একটি মান যা “পরে আসবে”। async/await (async/await): async function-এর ভেতরে await লিখলে সেই Promise শেষ না হওয়া পর্যন্ত ওই function অপেক্ষা করে, কিন্তু বাকি প্রোগ্রাম আটকে থাকে না। async function নিজেও একটি Promise ফেরত দেয়।

এই রানারে fetch নেই—ইচ্ছাকৃত। তাই আমরা Promise.resolve(...) দিয়ে fixture বানাব। কোডের কাঠামো (async/await, try/catch) আসল API-তেও একই থাকবে; অধ্যায় ১১-এ timeout ও retry যোগ করব।

উপমা — এবং কোথায় ভাঙে

উপমা: async/await হলো রেস্তোরাঁয় অর্ডার দিয়ে টোকেন নেওয়া: খাবার তৈরি হওয়া পর্যন্ত আপনি অন্য কাজ করতে পারেন, টোকেন ডাকলে (await শেষ) খাবার নেন। try/catch হলো “খাবার শেষ হয়ে গেলে বিকল্প অর্ডার” পরিকল্পনা।

কোথায় ভাঙে: রেস্তোরাঁ সাধারণত খাবার দেয়ই; নেটওয়ার্ক কল কখনো উত্তরই না দিতে পারে (চিরকাল ঝুলে থাকা)—তাই বাস্তবে timeout লাগে, যা এই উপমায় নেই।

ধাপে ধাপে উদাহরণ

ধাপে ধাপে: fixture থেকে অর্ডার আনা, JSON parse করা, ভুল সামলানো।

const fixtures = {
  "ORD-17": '{"id":"ORD-17","status":"shipped"}',
  "ORD-18": '{"id":"ORD-18",',          // ইচ্ছাকৃত ভাঙা
};
function fakeFetchOrder(id) {          // আসল API-র নকল
  return Promise.resolve(fixtures[id]);
}
async function getStatus(id) {
  const text = await fakeFetchOrder(id);
  try {
    return JSON.parse(text).status;
  } catch (err) {
    return "ডেটা ভাঙা: " + err.name;
  }
}

1. getStatus("ORD-17") কল → await fixture-এর টেক্সট পায় → parse → "shipped"।
2. getStatus("ORD-18") → parse ব্যর্থ → SyntaxError ধরা পড়ে → "ডেটা ভাঙা: SyntaxError"।
3. getStatus("ORD-99") → fixture-এ নেই → text = undefined → JSON.parse(undefined)-ও SyntaxError। ভালো কোডে আগেই “অর্ডার পাওয়া যায়নি” বলা উচিত।

অনুশীলন / অ্যাক্টিভিটি

fixture দিয়ে async/await ও এরর

// লোকাল fixture — আসল নেটওয়ার্ক নয়
const fixtures = {
  "ORD-17": '{"id":"ORD-17","status":"shipped","items":2}',
  "ORD-18": '{"id":"ORD-18",',
};

function fakeFetchOrder(id) {
  if (!id) {
    return Promise.reject(new Error("অর্ডার নম্বর খালি"));
  }
  return Promise.resolve(fixtures[id]);
}

async function getStatus(id) {
  try {
    const text = await fakeFetchOrder(id);
    if (text === undefined) {
      throw new Error("অর্ডার পাওয়া যায়নি: " + id);
    }
    const order = JSON.parse(text);
    return order.id + " → " + order.status;
  } catch (err) {
    return "সমস্যা (" + err.name + "): " + err.message;
  }
}

async function main() {
  console.log("শুরু");
  for (const id of ["ORD-17", "ORD-18", "ORD-99", ""]) {
    console.log(await getStatus(id));
  }
  console.log("JSON আবার:", JSON.stringify({ id: "ORD-17", ok: true }));
}

main();
console.log("main() কল হয়েছে — কিন্তু ফল এখনও আসেনি!");

সাধারণ ভুল

• JSON-এ সিঙ্গেল কোটেশনে key লেখা—{'id': 1} বৈধ JSON নয়
• await ছাড়া async function কল করে ফল ব্যবহার করা (Promise পাবেন, মান নয়)
• catch-এ এরর চুপচাপ গিলে ফেলা, কিছু না জানানো
• fixture-এ কাজ করলেই ধরে নেওয়া আসল API-তেও করবে

জ্ঞান যাচাই

নিচের 3টি প্রশ্নের উত্তর দিয়ে “জমা দিন” চাপুন। স্কোর সার্ভারে যাচাই হয়; প্রতিটি উত্তরের পর কেন সঠিক বা ভুল তা দেখাবে। লগইন থাকলে ফল আপনার অগ্রগতিতে সংরক্ষিত হয়।

সংক্ষেপে মনে রাখুন

• JSON: ডেটার সাধারণ ভাষা
• try/catch/throw: ব্যর্থতা নিয়ন্ত্রিতভাবে সামলানো
• async/await: অপেক্ষার কাজ, প্রোগ্রাম আটকায় না
• fixture দিয়ে শিখি, আসলের পার্থক্য মনে রাখি

পরবর্তী পাঠ

কোড ভুল হলে কীভাবে খুঁজবেন—পরের পাঠ ব্যবহারিক debugging: Practical Debugging

সূত্র ও যাচাই

• MDN — JSON
• MDN — async function
• MDN — Using promises
• MDN — Control flow and error handling

যাচাইয়ের তারিখ: 2026-10-19; লেখক: Muhibbullah Ansary। এই পাঠের 1টি JavaScript উদাহরণ বিল্ডের সময় সাইটের একই QuickJS রানারে চালানো হয়েছে এবং প্রত্যাশিত আউটপুট মিলেছে; সংখ্যাগত ফলাফল আলাদা assertion দিয়ে (floating-point tolerance সহ) পরীক্ষিত। এই পাঠের ডেটা/উদাহরণ শেখানোর জন্য তৈরি সিন্থেটিক ডেটা—বাস্তব কোনো দোকান বা গ্রাহকের নয়। স্বাধীন বিশেষজ্ঞ রিভিউ এখনও হয়নি; ভুল পেলে যোগাযোগ পাতায় জানান।