вибірка (імітація)

На реальній сторінці fetch(url) викликає сервер. Тут, у навчальному браузері, ми не можемо зв’язуватися із зовнішніми серверами, тому ми будемо використовувати «підробку» fetch: у тестах globalThis.fetch впроваджено, що повертає попередньо визначені дані, тому ви можете практикуватися на логіка незалежно від мережі.

API, який вас цікавить, такий самий, як справжній:

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

fetch(url) повертає Promise, який вирішує об’єкт Response. Response.json() повертається in turn Promise з розібраним тілом. Тож вам потрібно два очікування.

Повний приклад

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 це займе майже вдвічі більше часу (сума); паралельно це максимум з двох (найповільніший).

Спробуйте

Повторна вправа