جلب (محاكاة)

على الصفحة الحقيقية، يستدعي fetch(url) الخادم. هنا في متصفح التعلم لا نستطيع ذلك التحدث إلى خوادم خارجية، لذلك سوف نستخدم fetch "وهمي": في الاختبارات، 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()),
]);

بشكل تسلسلي مع awaits متتاليتين، سيستغرق الأمر ضعف الوقت (المجموع)؛ بالتوازي هو الحد الأقصى للاثنين (الأبطأ).

جربه

تمرين المراجعة