17370845950

JavaScript实现Ajax推荐用fetch，需手动处理HTTP错误和业务错误；跨域须后端配置CORS，前端无法绕过；错误应分网络失败、HTTP异常、业务错误三层处理。

JavaScript 实现 Ajax 请求主要靠 fetch 或 XMLHttpRequest，现代项目推荐用 fetch；跨域需后端配合设置 CORS 头，前端无法绕过；错误响应要区分网络失败、HTTP 状态码异常（如 404/500）和业务错误（如后端返回的 { code: 401, msg: "未登录" }），需分别处理。

用 fetch 发起基础 Ajax 请求

fetch 是基于 Promise 的原生 API，语法简洁，支持 async/await。注意它只在**网络请求失败时 reject**（比如断网、域名不存在），而 4xx/5xx 状态码仍会 resolve，需手动检查 response.ok 或 response.status。

• GET 请求示例：
  

  const res = await fetch('/api/user?id=123');
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const data = await res.json();

• POST 提交 JSON：
  

  const res = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: 'a', password: 'b' })
  });

跨域问题的核心是浏览器同源策略

跨域不是 Ajax 特有，而是所有浏览器发起的跨源 HTTP 请求都受限制。能否成功取决于**服务端是否允许当前源访问**，关键看响应头：

• Access-Control-Allow-Origin: * 或指定域名（如 https://myapp.com）
• 若带 Cookie 或认证头，还需 Access-Control-Allow-Credentials: true，且 Allow-Origin 不能为 *
• 预检请求（OPTIONS）需服务端正确响应 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers

前端无法“解决”跨域，只能确认请求是否符合 CORS 规则。开发时可用代理（如 Webpack DevServer 的 proxy）临时规避，上线必须由后端配置。

统一处理错误响应更可靠

真实项目中，错误不止一种类型，建议封装请求函数集中处理：

• 捕获网络异常（try/catch 捕获 fetch 抛出的错误）
• 检查 response.ok === false 或状态码范围（如 status ≥ 400）
• 解析 JSON 后再判断业务字段（如 data.code !== 0）
• 对不同错误类型做不同反馈：网络错误提示重试，401 跳登录页，403 提示无权限，业务错误显示 data.msg

需要兼容老浏览器时用 XMLHttpRequest

如果必须支持 IE10/11，可封装简易版 XHR 工具函数。注意设置 xhr.withCredentials = true 才能发带 Cookie 的跨域请求，且需监听 onerror、onload 和 onreadystatechange 综合判断状态。

不复杂但容易忽略细节，关键是把网络层、HTTP 层、业务层的错误分开识别和响应。