להביא (סימולציה)

בדף אמיתי, 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). זה עדיין נותן לך a 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 עוקבות זה ייקח כמעט פי שניים מהזמן (סכום); במקביל זה ה מקסימום מהשניים (האיטי ביותר).

נסה את זה

סקירת התרגיל