HTML中Fetch API发送GET请求的基本语法与响应处理-html教程-PHP中文网

fetch默认GET，参数须拼URL不可放body；response.json()返回Promise需await；404/500不触发catch须检查response.ok；CORS拦截时fetch不发请求，catch可捕获但无响应信息。

html中fetch api发送get请求的基本语法与响应处理

fetch() 默认就是 GET，不写 method 也没问题

只要没传 options 或者 options.method 不是 'POST'、'PUT' 等，fetch(url) 就自动走 GET。这点和 XMLHttpRequest 不同，不用显式设置请求类型。

但要注意：GET 请求的参数必须拼在 URL 后面，不能塞进 body —— 浏览器会直接忽略 body 字段。

正确写法：fetch('https://api.example.com/users?id=123&name=Tom')
错误写法：fetch('https://api.example.com/users', { method: 'GET', body: JSON.stringify({ id: 123 }) })（body 被丢弃，且可能报错）

URL 拼接建议用 URLSearchParams 避免手动编码：

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

response.json() 不等于“拿到数据”，它只是返回一个 Promise

response.json() 不会立刻给你 JSON 对象，它返回一个新的 Promise，需要再 .then() 或 await 才能取值。常见误操作是以为 response.json() 同步执行，结果打印出来是 Promise { }。

精英前端设计-专业版

企业级前端设计系统，支持多页面应用、React/Vue组件、品牌一致性与高级动效编排。

下载

错误示例：

const response = await fetch('/api/data');<br>const data = response.json(); // ← 这里 data 是 Promise，不是对象<br>console.log(data); // Promise { <pending> }</pending>

正确写法：const data = await response.json(); 或 .then(data => ...)
其他响应解析方法也要注意对应类型：response.text() 返回字符串，response.blob() 返回二进制，不能混用

404 和 500 不会触发 catch，必须手动检查 response.ok

fetch() 只在网络层面失败（比如断网、DNS 解析失败、CORS 被拒）时才 reject；HTTP 状态码如 404 Not Found 或 500 Internal Server Error 会被当成“成功响应”，response.ok === false，但 Promise 依然 resolve。

不检查 response.ok 的后果：后续调用 response.json() 可能遇到空响应体或非 JSON 内容，抛出 SyntaxError

推荐结构（async/await）：

const response = await fetch('/api/data');<br>if (!response.ok) {<br>  throw new Error(`HTTP ${response.status} ${response.statusText}`);<br>}<br>const data = await response.json();

如果后端返回的是 200 以外的成功码（比如 201、204），也要按需调整判断逻辑，不能只认 response.ok

CORS 错误发生在 fetch 调用前，catch 捕不到

跨域请求被浏览器拦截时，fetch() 根本不会发出网络请求，Promise 直接 reject，错误信息通常是 TypeError: Failed to fetch 或更模糊的 NetworkError when attempting to fetch resource。这时候 catch 能捕获，但无法拿到 response 或状态码。

调试优先看浏览器控制台的 Network 面板：有没有发出去？请求头有没有 Origin？响应头有没有 Access-Control-Allow-Origin？
mode: 'no-cors' 会让请求发出去，但响应变成 opaque 类型，response.ok、response.status 全部不可读 —— 这不是绕过 CORS 的办法，只是调试时观察是否真发出了请求
本地开发时，后端必须配好 CORS 响应头；生产环境若用 Nginx，得加 add_header 'Access-Control-Allow-Origin' '*';（注意安全边界）

实际写的时候，最常漏掉的是 response.ok 检查和 await response.json() 的二次等待 —— 这两个点一错，错误表现往往很隐晦，比如控制台没报错但页面空白，或者数据渲染成 [object Promise]。