AJAX与fetch使用教程详解

本文深入解析了AJAX这一核心前端技术的本质与演进，重点对比传统XMLHttpRequest与现代推荐方案fetch的差异，直击fetch在实际开发中极易踩坑的关键细节——如默认不携带Cookie、不自动识别HTTP错误状态、必须手动解析响应体、缺乏超时机制等，并通过简洁明了的GET/POST示例和常见静默失败场景分析，帮助开发者避开“看似运行却无反应”的陷阱；文章最后点明：fetch的“干净”恰是双刃剑，真实项目中往往需封装增强功能，才能真正支撑稳健的网络请求需求。

JavaScript 中的 AJAX 不是某个具体函数，而是一种通过 JavaScript 在不刷新页面的前提下与服务器交换数据的技术模式；fetch 是现代浏览器中实现这种模式的推荐方式，但它默认不带 Cookie、不自动处理 4xx/5xx 状态码，直接用容易出错。

什么是 AJAX？别被术语绕晕

AJAX 全称 Asynchronous JavaScript and XML，本质就是「用 JS 发 HTTP 请求 + 解析响应」。XML 早已不是重点，现在传 JSON 才是主流。关键在于：请求发出去后，页面不用跳转，JS 可以接着处理返回的数据。

过去靠 XMLHttpRequest 手写，现在更常用 fetch —— 它是原生 API、基于 Promise、语法更简洁，但行为更“严格”。

fetch 基础用法和必须注意的坑

fetch 默认只管发请求、收响应，不管状态是否成功。比如服务器返回 404 或 500，fetch 依然会进入 .then()，而不是 .catch()。

• 必须手动检查 response.ok（即 status 在 200–299 范围内）
• 必须显式调用 response.json() 或 response.text() 才能读取响应体，且只能调用一次
• 默认不发送 Cookie，需加 { credentials: 'include' } 才能携带认证信息
• 没有超时控制，需自己用 AbortController 实现

简单 GET 示例：

fetch('/api/user')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err));

POST 请求怎么传 JSON 数据？

发 JSON 到后端，核心就三点：设对 Content-Type、把 JS 对象转成字符串、用 body 字段传出去。

• headers 必须包含 { 'Content-Type': 'application/json' }
• body 必须是字符串，所以得用 JSON.stringify()
• 如果接口需要登录态，别忘了加 credentials: 'include'

示例：

fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  credentials: 'include',
  body: JSON.stringify({ username: 'admin', password: '123' })
})
.then(r => r.json())
.then(console.log);

为什么有时 fetch 看似没反应？常见静默失败点

很多“没反应”其实是请求发出去了但 JS 没处理响应体，或者跨域被拦在预检阶段。

• 忘记调用 response.json() 或 response.text() → 后续 .then() 收不到数据
• 后端返回非 JSON（比如 HTML 错误页），却强行 .json() → 抛 SyntaxError
• 本地开发时用 file:// 协议打开 HTML → 浏览器禁止 fetch，报 Failed to fetch
• CORS 配置漏了 Access-Control-Allow-Origin 或预检失败 → 控制台显示 CORS 错误，但 catch 捕不到

调试建议：先在浏览器 Network 面板确认请求是否发出、状态码是否正常、Response 是否有内容，再看 JS 是否正确解析。

真正麻烦的不是怎么写 fetch，而是它太“干净”——没默认重试、没统一错误格式、没 loading 状态管理。业务项目里往往要自己包一层，补上超时、鉴权、错误分类、取消能力这些现实需要的东西。

本篇关于《AJAX与fetch使用教程详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！