HTML5fetch获取数据全攻略

HTML5 的 fetch API 虽语法简洁，但实际开发中极易因忽略异步处理、HTTP状态码校验、响应体解析时机或 POST 请求的 headers/body 格式规范而引发隐蔽错误——比如拿不到数据、解析失败、后端收不到参数等；掌握 await/.then 的正确链式调用、手动检查 response.ok、严格区分 fetch() 与 response.json() 的 Promise 层级、以及为不同内容类型精准配置 Content-Type 和序列化 body，才是写出健壮网络请求的关键。

用 fetch 发送请求本身很简单，但实际项目中出错多是因为没处理好异步链、错误分支或响应体解析逻辑。

fetch 基本调用必须用 await 或 .then() 链式处理

fetch 返回的是 Promise，不 await / 不接 .then() 就拿不到数据，也捕获不到网络错误。

• 常见错误：写了 fetch('/api/user') 但没等它完成，直接去读 response.data —— 此时 response 还是 Promise 对象，不是真实响应
• 正确做法：要么用 async/await（推荐），要么确保每个 fetch 后都跟 .then(res => res.json()) 这类解析步骤
• 注意：fetch 只在网络失败（如断网、DNS 失败）时 reject；HTTP 状态码 404、500 不会触发 catch，得手动检查 response.ok

获取 JSON 数据要显式调用 response.json()

fetch 返回的 Response 对象不是直接可用的数据，必须调用它的解析方法才能拿到 JS 对象。

• response.json() 返回另一个 Promise，需再次 await 或 .then
• 其他常用解析方法：response.text()（纯字符串）、response.blob()（文件下载）、response.arrayBuffer()（二进制）
• 别写成 const data = await fetch('/api/user').json() —— fetch() 本身没有 json() 方法，会报 TypeError: fetch(...).json is not a function

async function getUser() {
  try {
    const response = await fetch('/api/user');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json(); // 必须 await 这一步
    return data;
  } catch (err) {
    console.error('Fetch failed:', err);
  }
}

POST 请求要配 headers 和 body，且注意格式

GET 请求靠 URL 传参，POST 则需手动设置请求头和请求体，否则后端很可能收不到数据或解析失败。

• 发送 JSON 数据时，headers 必须包含 'Content-Type': 'application/json'
• body 必须是字符串（用 JSON.stringify()），不能直接传对象
• 如果后端期望表单数据（application/x-www-form-urlencoded），要用 URLSearchParams 构造 body
• 忘记设 Content-Type 是最常被忽略的点，会导致后端收到空 body

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'admin', password: '123' })
});

真正容易卡住的地方不在语法，而在 response 状态判断、JSON 解析时机、以及 POST 的 content-type 匹配——这三处任一漏掉，控制台可能只显示 “undefined” 或 “Unexpected end of JSON input”，但根本原因藏得很深。

终于介绍完啦！小伙伴们，这篇关于《HTML5fetch获取数据全攻略》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！