بازیافت (نقلی)

ایک حقیقی صفحہ پر، 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 کے ساتھ اس میں تقریباً دوگنا وقت لگے گا (رقم)؛ متوازی طور پر یہ ہے دو میں سے زیادہ سے زیادہ (سست ترین)۔

اسے آزمائیں

ورزش کا جائزہ لیں۔