javascript ajax如何实现_怎样发起网络请求【教程】-js教程-PHP中文网

现代 JavaScript 推荐用 fetch 发起 GET 请求，最简写法为 fetch('/api/user')，但需注意默认不带 cookie、HTTP 错误码不会自动 reject，且响应体需手动解析。

javascript 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 块。

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

不要在 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）