выборка (смоделированная)

На реальной странице 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()),
]);

Последовательно с двумя последовательными await это займет почти вдвое больше времени (сумма); параллельно это максимум из двух (самый медленный).

Попробуйте это

Обзор упражнения