JavaScript 中怎么用 Fetch API 发送并解析标准格式的 RESTful 请求-js教程-PHP中文网

fetch api 发送 restful 请求需正确设置 method、headers 和 body（如需），响应必须显式调用 .json() 等方法解析；get 用 urlsearchparams 拼参，post/put/patch 需设 content-type 并 json.stringify() body；须手动检查 res.ok 或 status 处理 http 错误；认证通过 authorization header，跨域带 cookie 需 credentials: 'include'。

javascript 中怎么用 fetch api 发送并解析标准格式的 restful 请求

用 Fetch API 发送标准 RESTful 请求，核心是正确设置 method、headers 和请求体（如需），再用 response.json() 解析 JSON 响应。它本身不自动解析响应体，必须显式调用 .json()、.text() 等方法。

发送 GET 请求（无请求体）

GET 通常只带查询参数，不传 body。URL 中的参数需手动拼接或用 URLSearchParams 构建：

直接拼接：fetch('/api/users?id=123&name=john')

更安全的方式（自动编码）：

const params = new URLSearchParams({ id: 123, name: 'john' });<br>fetch(`/api/users?${params}`)

响应默认是流式数据，必须用 .json() 才能拿到 JS 对象：

fetch('/api/users/1')<br>  .then(res => {<br>    if (!res.ok) throw new Error(`HTTP ${res.status}`);<br>    return res.json(); // 必须调用<br>  })<br>  .then(data => console.log(data));

发送 POST / PUT / PATCH 请求（带 JSON 数据）

这类请求需设置 Content-Type: application/json，并把 JS 对象用 JSON.stringify() 转为字符串：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

基本结构：

fetch('/api/users', {<br>  method: 'POST',<br>  headers: { 'Content-Type': 'application/json' },<br>  body: JSON.stringify({ name: 'Alice', email: 'a@example.com' })<br>})

注意：不要手动设 Content-Length，浏览器会自动计算；也不要在 headers 中漏掉 Content-Type，否则后端可能无法识别 JSON
PUT 和 PATCH 写法一致，仅改 method 字符串即可

处理错误与状态码

Fetch 不会在 HTTP 错误（如 404、500）时 reject Promise，只在网络失败（如断网、DNS 失败）时 reject。因此必须主动检查 response.ok 或 response.status：

res.ok 等价于 res.status >= 200 && res.status

常见处理模式：

fetch('/api/posts')<br>  .then(res => {<br>    if (!res.ok) {<br>      throw new Error(`请求失败：${res.status} ${res.statusText}`);<br>    }<br>    return res.json();<br>  })<br>  .catch(err => console.error('网络或业务错误:', err));

带认证或自定义头的请求

RESTful 接口常需 token 认证，通过 headers 注入 Authorization 字段即可：

Bearer Token 示例：

const token = localStorage.getItem('auth_token');<br>fetch('/api/profile', {<br>  headers: {<br>    'Authorization': `Bearer ${token}`,<br>    'Content-Type': 'application/json'<br>  }<br>})