GET与POST请求详解及参数配置方法

本文深入解析了 JavaScript 中 Fetch API 的 Request 构造函数用法，系统讲解如何通过配置 URL 和初始化对象（init）灵活定制 HTTP 请求——包括全大写敏感的 method 设置（GET/POST/PUT/DELETE 等）、支持对象或 Headers 实例的请求头管理、与 Content-Type 严格匹配的 body 载荷（JSON/FormData/URLSearchParams 等），以及关键行为控制参数如 mode（跨域策略）、credentials（凭据携带）、cache（缓存逻辑）和 signal（中止机制）；特别强调 Request 本身不发送请求，而是生成可复用、可组合、类型友好的请求实例，为构建健壮、可维护的前端网络层打下坚实基础。

用 Request 构造函数配置请求方法与参数，核心是传入 URL 和一个配置对象（init），其中 method 指定 HTTP 方法，其他字段如 headers、body、mode 等控制行为。它不直接发送请求，只是构造一个可复用的 Request 实例，后续传给 fetch() 即可。

指定请求方法（GET / POST / PUT / DELETE 等）

method 字段决定 HTTP 动词，默认为 "GET"。注意大小写敏感，必须全大写。

• new Request("/api/users", { method: "GET" })
• new Request("/api/users", { method: "POST" })
• new Request("/api/users/123", { method: "PUT" })
• new Request("/api/users/123", { method: "DELETE" })

设置请求头（Headers）

headers 可以是对象、Headers 实例或字符串数组。推荐用对象或 Headers 实例，便于维护和类型安全。

• 用普通对象：{ headers: { "Content-Type": "application/json" } }
• 用 Headers 实例（更灵活，支持重复键、大小写保留）：
  const headers = new Headers(); headers.set("Authorization", "Bearer abc123");
new Request("/api/data", { headers })

注意：某些 header（如 Content-Length、Host）由浏览器自动设置，手动设置可能被忽略或报错。

携带请求体（body）与 Content-Type 匹配

body 仅对 POST、PUT、PATCH 等有载荷的方法有效。值可以是 String、FormData、Blob、URLSearchParams 或 ReadableStream。务必确保 Content-Type 头与实际数据格式一致。

• JSON 数据：
  new Request("/api/login", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ username: "a", password: "b" })
})
• 表单数据：
  const formData = new FormData(); formData.append("file", fileInput.files[0]);
new Request("/upload", { method: "POST", body: formData })
  （此时不要手动设 Content-Type，浏览器会自动生成带 boundary 的 multipart 头）
• URL 编码参数：
  new Request("/search", {
  method: "POST",
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
  body: new URLSearchParams({ q: "js", page: "1" })
})

常用附加配置（mode、credentials、cache 等）

这些选项影响请求的安全策略、凭据携带和缓存行为，常与跨域或登录态相关：

• mode: "cors"（默认）：允许跨域，但需服务端响应 Access-Control-Allow-Origin
• mode: "no-cors"：发出“隔离”请求（只允许简单方法 + 简单头），响应不可读，一般少用
• credentials: "include"：带上 Cookie 和 HTTP 认证信息（跨域时需服务端配合）
• cache: "no-cache" 或 "force-cache"：控制是否走浏览器缓存
• signal：传入 AbortSignal 实现请求中止（如用户取消操作）

例如带认证的跨域请求：
const controller = new AbortController();
const req = new Request("https://api.example.com/data", {
  method: "GET",
  credentials: "include",
  signal: controller.signal
});
fetch(req).catch(err => { if (err.name === "AbortError") console.log("已取消"); });

今天关于《GET与POST请求详解及参数配置方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！