আনয়ন (সিমুলেটেড)

একটি বাস্তব পৃষ্ঠায়, fetch(url) একটি সার্ভারকে কল করে৷ এখানে শেখার ব্রাউজারে আমরা পারি না বহিরাগত সার্ভারের সাথে কথা বলুন, তাই আমরা একটি "জাল" fetch ব্যবহার করব: পরীক্ষায়, a globalThis.fetch হল ইনজেকশন যা পূর্বনির্ধারিত ডেটা ফেরত দেয়, যাতে আপনি অনুশীলন করতে পারেন নেটওয়ার্কের উপর নির্ভর না করে যুক্তি।

আপনি যে API সম্পর্কে যত্নশীল তা আসলটির মতোই:

const response = await fetch('/api/utenti');
const data = await response.json();

fetch(url) একটি প্রতিশ্রুতি প্রদান করে যা একটি Response অবজেক্টের সমাধান করে। Response.json() ফেরত দেয় বিশেষে পার্সড বডির সাথে একটি প্রতিশ্রুতি। তাই আপনাকে দুই অপেক্ষা করতে হবে।

সম্পূর্ণ উদাহরণ

async function loadUsers() {
  const response = await fetch('/api/utenti');
  const users = await response.json();
  return users;
}

const list = await loadUsers();
// [{...}, {...}]

এটি সফল হয়েছে কিনা তা পরীক্ষা করা হচ্ছে

fetch নিক্ষেপ করে না যদি সার্ভার একটি ত্রুটি স্থিতি (404, 500) সহ প্রতিক্রিয়া জানায়। এটি এখনও আপনাকে দেয় একটি Response, কিন্তু ok: false এর সাথে:

const r = await fetch('/api/utenti');
if (!r.ok) {
  throw new Error(`HTTP ${r.status}`);
}
const data = await r.json();

fetch শুধুমাত্র ছুড়ে দেয় যদি নেটওয়ার্ক ব্যর্থ হয় (কোন সংযোগ নেই, DNS, ...)।

সমান্তরালে একাধিক অনুরোধ: Promise.all

আপনার যদি N স্বাধীন কল করার প্রয়োজন হয়, সেগুলি একসাথে চালু করুন এবং Promise.all এর সাথে তাদের সকলের জন্য অপেক্ষা করুন:

const [u, p] = await Promise.all([
  fetch('/api/utenti').then((r) => r.json()),
  fetch('/api/prodotti').then((r) => r.json()),
]);

ধারাবাহিকভাবে পরপর দুইটি await এর প্রায় দ্বিগুণ সময় লাগবে (সমষ্টি); সমান্তরালে এটা হয় সর্বাধিক দুটি (ধীরতম)।

চেষ্টা করে দেখুন

ব্যায়াম পর্যালোচনা করুন