JavaScript Academy · 课时

发起 GET 请求

Q: 「发起 GET 请求」这节课中我会学到什么？

获取数据并解析 JSON 响应。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

获取数据并解析 JSON 响应。

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

fetch 的作用

Fetch API 可以在浏览器中发出 HTTP 请求，并返回一个 Promise。它是旧版 XMLHttpRequest 的现代替代方案。

一个基本的 GET 请求

使用网址调用 fetch(url)。它默认使用 GET 方法，并解析为一个 Response 对象。

fetch("https://api.example.com/users")
  .then((response) => {
    console.log(response.status); // 200
  });

Response 对象

解析后的值是一个 Response，而不是数据本身。它包含状态、标头以及读取正文的方法。您必须调用一种正文读取方法才能获得内容。

fetch(url).then((response) => {
  console.log(response.ok);     // true if status 200-299
  console.log(response.status); // 200
});

解析 JSON

大多数 API 都返回 JSON。调用 response.json()，它本身会返回一个 Promise，并解析为已解析的对象。

fetch(url)
  .then((response) => response.json())
  .then((data) => {
    console.log(data); // parsed JS object/array
  });

为什么有两个 Promise

第一个 Promise 会在标头到达时解析；第二个（.json()）会在完整正文下载并解析完成时解析。这就是为什么要链式调用两个 .then()。

使用异步/等待

大多数代码使用 async/await 来提高可读性。每个 await 都会暂停执行，直到其 Promise 解析。

async function getUsers() {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

其他正文读取方法

除了 json() 之外，Response 还可以读取为 text()、blob()（二进制数据）、arrayBuffer() 或 formData()。请根据服务器返回的内容进行选择。

const response = await fetch(url);
const html = await response.text(); // raw string

正文只能读取一次

响应正文是一个只能使用一次的流。在同一个响应上先调用 json() 再调用 text() 会抛出错误。如果确实需要两者，请使用 response.clone() 进行克隆。

查询参数

请使用 URLSearchParams 安全地构建查询字符串，而不要手动拼接。它会为您编码特殊字符。

const params = new URLSearchParams({ page: 2, q: "hello world" });
fetch("https://api.example.com/search?" + params);

发送标头

传入带有选项的第二个参数。对于 GET 请求，您通常会设置 Accept 标头或身份验证令牌。

fetch(url, {
  headers: {
    "Accept": "application/json",
    "Authorization": "Bearer " + token
  }
});

返回 Promise

将获取数据的逻辑封装在一个返回 Promise 的函数中，以便调用方可以等待它。这样可以在整个应用中复用数据加载逻辑。

function loadUser(id) {
  return fetch("/api/users/" + id).then((r) => r.json());
}

快速检查

使用 fetch 发出 GET 请求。

回顾

fetch(url) 返回一个指向 Response 的 Promise。使用 json()、text() 或 blob() 读取正文（只能读取一次）。使用 async/await 提高清晰度，使用 URLSearchParams 处理查询字符串，并使用选项对象设置标头。将其封装在返回 Promise 的函数中，以便复用。

常见问题解答

「发起 GET 请求」课时是免费的吗？

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

「发起 GET 请求」这节课中我会学到什么？

获取数据并解析 JSON 响应。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「发起 GET 请求」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy