获取（模拟）

在真实页面上，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。所以你需要两个等待。

完整示例

async function loadUsers() {
  const response = await fetch('/api/utenti');
  const users = await response.json();
  return users;
}

const list = await loadUsers();
// [{...}, {...}]

检查是否成功

如果服务器响应错误状态（404、500），fetch 不会抛出。它仍然给你 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 会花费几乎两倍的时间（总和）；同时它是两者中的最大值（最慢的）。

尝试一下

锻炼#js.m7.l3.e1

尝试：0加载中...

定义 `loadUsers()` 异步：调用 fetch('/api/utenti')，然后调用 .json() 获取 users 数组并返回。

正在加载编辑器...

显示提示

两种等待：一种用于 fetch，另一种用于 .json()。

3 次尝试后可用的解决方案

复习练习

锻炼#js.m7.l3.e2