javascript的AJAX如何实现数据请求?【教程】

8次阅读

fetch() 是现代 javaScript 发起网络请求的事实标准,比 XMLhttpRequest 更简洁、符合 promise 语义且易配合 async/await;但需注意它对 404/500 状态码仍 resolve,须手动检查 response.ok 或 status,并显式配置 credentials、headers、body 及手动解析响应体。

javascript的AJAX如何实现数据请求?【教程】

fetch() 是现在最该用的 ajax 方式

现代 javascript 中,fetch() 已成为发起网络请求的事实标准,它比老式的 XMLHttpRequest 更简洁、更符合 Promise 语义,也更容易配合 async/await 使用。浏览器兼容性方面,chrome 42+、firefox 39+、safari 10.1+、edge 14+ 都已原生支持,如果需要兼容 IE,得加 polyfill 或换方案。

常见错误是直接用 fetch(url) 后就以为拿到了数据——其实它只返回一个 Promise,且 **即使 HTTP 状态码是 404 或 500,Promise 依然 resolve**,必须手动检查 response.okresponse.status

  • fetch() 默认不带 cookie,需显式传 { credentials: 'include' } 才能发带凭证的请求
  • POST 请求必须设置 headersbody,比如发送 jsON 要写 json.stringify(data) 并设 'Content-Type': 'application/json'
  • 响应体不是自动解析的,要用 response.json()response.text()response.blob() 手动读取
async function getUser(id) {   try {     const response = await fetch(`/api/users/${id}`, {       method: 'GET',       headers: { 'Accept': 'application/json' }     });      if (!response.ok) {       throw new Error(`HTTP error! status: ${response.status}`);     }      const data = await response.json();     return data;   } catch (err) {     console.error('请求失败:', err);     throw err;   } }

XMLHttpRequest 还有必要学吗?

除非维护老项目或需要精细控制上传进度、取消请求(abort())、或处理流式响应(如长轮询),否则不建议新代码用 XMLHttpRequest。它的回调嵌套深、API 设计反直觉(比如 onreadystatechange 需要判断 readyState === 4status >= 200 && status )。

容易踩的坑:

立即学习Java免费学习笔记(深入)”;

  • 忘记调用 xhr.open() 就直接 xhr.send() → 报错 “Failed to execute ‘send’ on ‘XMLHttpRequest’: The Object’s state must be OPENED”
  • 没设 Content-Type 头却传了 JSON 字符串 → 后端可能收不到 req.body
  • xhr.responseText 当成已解析对象用 → 实际是字符串,得 JSON.parse()

axios 适合什么场景?

axios 是基于 fetch 封装的第三方库,优势在于:默认 JSON 解析、自动转换请求/响应数据、内置超时、拦截器、取消请求(CancelTokenAbortController)、对 GET 参数自动序列化(params 选项)。

但要注意:

  • 它不会自动带上 cookie,仍需配置 withCredentials: true
  • 4xx/5xx 响应默认会 reject,这点和 fetch 不同,别误以为“没报错就成功了”
  • 全局拦截器里修改 config 后,记得 return config,否则请求发不出去
  • node.js 环境下需用 axioshttp 适配器,浏览器里用的是 XMLHttpRequestfetch(取决于版本)

跨域请求被拦住怎么办?

浏览器报错 “CORS header ‘access-Control-Allow-Origin’ missing” 或 “No ‘Access-Control-Allow-Origin’ header”,本质是服务端没配好 CORS 响应头。前端不能绕过这个限制(除了用代理或 JSONP,但 JSONP 只支持 GET 且不安全)。

开发阶段常用解法:

  • 后端响应头加 Access-Control-Allow-Origin: *(仅限测试,生产环境需指定域名)
  • vite / webpack Dev Server 配 proxy,把 /api 请求代理到后端地址,让请求变成同源
  • 用浏览器插件临时禁用 CORS(仅调试用,不可用于验证逻辑)

真正上线时,跨域必须由后端配合解决;前端强行“修”只是掩耳盗铃。

最后提醒一句:别在 fetchaxiosthen() 里写大量业务逻辑,容易失控。统一用 try/catch.catch() 处理错误,把数据解析、状态更新、ui 反馈拆开,才好维护。

text=ZqhQzanResources