JavaScriptAjax发起请求教程

本文深入解析了现代 JavaScript 中使用 fetch API 发起网络请求的核心要点与常见陷阱：从最简 GET 请求写法出发，强调其默认不携带 Cookie、HTTP 错误状态（如 404/500）不会自动抛错、响应体需手动解析等关键特性；详解 POST 提交 JSON 时必须设置 Content-Type 头和序列化 body 的必要性；推荐用 async/await 替代链式 Promise 以实现更健壮的错误处理；同时坦诚指出兼容旧浏览器（如 IE11）的现实方案——合理选用 polyfill 或回退至 XMLHttpRequest，并提醒跨域、凭证、重定向等底层差异才是实际开发中最易踩坑的难点。无论你是初学 Ajax 还是正在排查线上请求异常，这篇教程都直击痛点、即学即用。

用 fetch 发起 GET 请求最简写法

现代 JavaScript 推荐直接用 fetch，它比 XMLHttpRequest 更简洁、更符合 Promise 语义。发起一个基础 GET 请求只需一行核心代码，但要注意它**默认不带 cookie，且不会自动 reject 网络错误（如 404、500）**。

• fetch 返回 Promise，但只在网络失败（如断网、DNS 错误）时 reject；HTTP 状态码如 404、500 仍会 resolve，需手动检查 response.ok 或 response.status
• 若需携带 cookie，必须显式传 { credentials: 'include' }，否则服务端收不到 session
• 响应体不是 JSON 对象，而是 Response 实例，需调用 .json()、.text() 等方法读取

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 数据要设好 headers

用 fetch 发 POST 请求时，如果后端期待 Content-Type: application/json，就必须手动设置 headers，否则 Express、Django 等框架默认不解析请求体。

• 忘记设 headers 是最常见 400 错误来源之一，后端日志常显示 “no JSON data” 或 “body is empty”
• body 必须是字符串，所以得先 JSON.stringify()，不能直接传对象
• GET 请求的 query 参数需手动拼接进 URL，fetch 不处理 URL 编码，要用 URLSearchParams 或 encodeURIComponent

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

用 async/await 写更清晰的错误处理

链式 .then().catch() 容易漏掉中间环节的异常，尤其涉及多个异步步骤（如先 fetch 再处理数据再更新 DOM）时。async/await 让错误捕获更直观，也方便复用 try/catch 块。

• 不要在 await fetch(...) 后直接 await response.json()，因为 .json() 也可能抛错（如返回非 JSON 内容）
• 建议把 response.json() 封装成独立 await 步骤，并检查 response.ok
• 避免在顶层函数用 async 却不 await，会导致未处理的 Promise rejection

async function loadUser(id) {
  try {
    const response = await fetch(`/api/user/${id}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const data = await response.json(); // 这里可能 SyntaxError
    return data;
  } catch (err) {
    console.error('加载用户失败:', err.message);
    throw err;
  }
}

兼容旧浏览器时别硬扛，用 XMLHttpRequest 或 polyfill

IE11 及更早版本不支持 fetch，如果项目必须支持，不要自己重写全套逻辑。要么引入轻量 polyfill（如 whatwg-fetch），要么退回到 XMLHttpRequest —— 但注意它的回调机制和错误触发时机与 fetch 不同。

• XMLHttpRequest 的 onerror 只在真正网络失败时触发，而 onload 总是执行，需手动判断 xhr.status
• 设置请求头用 xhr.setRequestHeader()，且必须在 xhr.open() 之后、xhr.send() 之前
• IE 对 withCredentials（即 cookie）的支持从 IE10 开始，且需服务端明确允许（Access-Control-Allow-Credentials: true）

真正麻烦的不是语法，而是跨域、cookie、重定向、超时控制这些细节在两种 API 中行为不一致。能用 fetch 就别倒退，除非明确知道目标环境限制。

理论要掌握，实操不能落！以上关于《JavaScriptAjax发起请求教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！