第 3 课

fetch 与 Axios 输出

理解请求从终端 cURL 转到浏览器或 Node 代码时会发生什么变化。

把 cURL 转成 fetch 或 Axios,不只是语法变化。运行时行为也可能变化。

fetch

fetch 可用于现代浏览器和现代 Node 运行时。它返回 response 对象,并且不会因为 HTTP 4xx 或 5xx 状态自动抛错。

const response = await fetch("https://api.example.com/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Ada" })
});

if (!response.ok) {
  throw new Error(`HTTP ${response.status}`);
}

Axios

Axios 封装请求和响应行为的方式不同。它通常会在非 2xx 响应时 reject,并在可能时自动解析 JSON。

const response = await axios.post(
  "https://api.example.com/users",
  { name: "Ada" },
  { headers: { "Content-Type": "application/json" } }
);

浏览器差异

cURL 可以从你的机器发送几乎任意 header。浏览器代码会受到 CORS、禁止设置的 header、cookie 和 credentials 规则限制。转换后的请求可能是合法 JavaScript,但在浏览器里仍然失败。

Node 差异

Node 代码可能需要环境变量、代理设置、TLS 选项或超时处理,而简单 cURL 示例不会展示这些。

把生成代码当作起点。粘贴进生产代码前,应先审查运行时假设。

想动手练习时,可使用 DevCove 相关工具——可选,不属于本课正文。

打开相关工具

返回课程概览