フェッチ (シミュレート)

実際のページでは、fetch(url) がサーバーを呼び出します。ここの学習ブラウザではできません 外部サーバーと通信するため、テストでは「偽の」 fetch: を使用します。 globalThis.fetch は、事前定義されたデータを返す挿入されているため、練習することができます。 ネットワークに依存しないロジックを実現します。

気になる API は実際の API と同じです。

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

fetch(url) は、Response オブジェクトに解決される Promise を返します。 Response.json() が返されます 次に、解析された本体を持つ Promise です。したがって、2 待つ必要があります。

完全な例

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()),
]);

2 つの連続する await をシリアルに実行すると、ほぼ 2 倍の時間がかかります (合計)。並行してそれは 2 つのうちの最大値 (最も遅いもの)。

試してみてください

復習演習