Frontend Academy · 课时

Fetch API：GET、POST、PUT、DELETE

使用 fetch 发起 GET 请求，在 POST 和 PUT 请求中发送 JSON 请求体，并调用 DELETE 端点移除资源。

Fetch API：GET、POST、PUT、DELETE 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

fetch 接口

fetch() 是现代浏览器用于发起 HTTP 请求的接口。它会返回一个 Promise，该 Promise 会解析为 Response 对象。所有现代浏览器以及 Node.js 18 及更高版本都内置支持。

基本 GET 请求

最简单的 fetch 用法——传入网址，等待响应，然后解析 JSON。

async function fetchUsers() {
  const res = await fetch('https://api.example.com/users');
  if (!res.ok) throw new Error('HTTP ' + res.status);
  const users = await res.json();
  return users;
}

使用 JSON 正文发送 POST

使用 method、headers 和 body。正文必须是字符串——对对象调用 JSON.stringify()。

async function createUser(user) {
  const res = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(user)
  });
  if (!res.ok) throw new Error('Failed: ' + res.status);
  return res.json();
}

createUser({ name: 'Alice', email: 'alice@example.com' });

使用 PUT 进行完整更新

PUT 会替换整个资源。请发送完整对象——省略的字段通常会在服务器上被清除。

await fetch(`/api/users/${id}`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    id, name: 'Alice', email: 'alice@example.com', role: 'admin'
  })
});

使用 PATCH 进行部分更新

PATCH 只更新您发送的字段。进行部分更新时，应使用它而不是 PUT。

await fetch(`/api/users/${id}`, {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'new@example.com' })
});

DELETE 请求

DELETE 通常没有正文。响应经常会返回不带正文的 204 No Content。

async function deleteUser(id) {
  const res = await fetch(`/api/users/${id}`, { method: 'DELETE' });
  if (!res.ok) throw new Error('Delete failed');
  // 204 No Content — no JSON to parse
}

身份验证标头

为受保护的接口附加 Authorization 标头。

const res = await fetch('/api/me', {
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
});

网址查询参数

使用 URLSearchParams 构建查询字符串，以确保安全编码。

const params = new URLSearchParams({
  q: 'react hooks',
  page: '2',
  pageSize: '20'
});

const res = await fetch(`/api/search?${params}`);
// /api/search?q=react+hooks&page=2&pageSize=20

为什么 fetch 不会因 HTTP 错误抛出异常

fetch 只会在网络失败时拒绝——即使响应状态为 404 或 500，Promise 仍会成功解析。始终检查 res.ok（2xx 时为 true）或 res.status，并手动抛出异常。

const res = await fetch('/api/users/999');
if (!res.ok) {
  // res.ok is false for 4xx and 5xx
  throw new Error(`Server error ${res.status}: ${await res.text()}`);
}

使用 AbortController 取消请求

取消正在进行的请求，避免使用过时的结果——这对输入联想搜索和 React effect 清理至关重要。

const controller = new AbortController();

fetch('/api/search?q=hooks', { signal: controller.signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name !== 'AbortError') throw err;
  });

// Cancel:
controller.abort();

发送 FormData

对于文件上传或多部分表单，请将 FormData 对象作为正文传入。不要设置 Content-Type——浏览器会使用正确的边界自动添加它。

const form = new FormData();
form.append('avatar', fileInput.files[0]);
form.append('name', 'Alice');

await fetch('/api/upload', { method: 'POST', body: form });
// no Content-Type header — browser sets multipart/form-data

快速检查

为什么服务器返回 404 或 500 时，fetch() 不会抛出错误？

回顾：fetch 接口

fetch() 返回一个 Promise，其结果是 Response。请求方法包括：GET（默认）、POST、PUT、PATCH、DELETE。JSON 正文需要使用 JSON.stringify()，并设置 Content-Type 标头。fetch 只会在网络失败时拒绝——请手动检查 res.ok。使用 URLSearchParams 构建查询字符串。使用 AbortController 取消请求。使用 FormData 上传文件（不要设置 Content-Type——由浏览器处理）。

常见问题解答

「Fetch API：GET、POST、PUT、DELETE」课时是免费的吗？

是的 — 「Fetch API：GET、POST、PUT、DELETE」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「Fetch API：GET、POST、PUT、DELETE」这节课中我会学到什么？

使用 fetch 发起 GET 请求，在 POST 和 PUT 请求中发送 JSON 请求体，并调用 DELETE 端点移除资源。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「Fetch API：GET、POST、PUT、DELETE」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy