js获取后端数据

打开浏览器控制台，获取后端敲下 fetch('/api/user')，数据回车。获取后端如果后端接口正常，数据你会在 Network 面板里看到一条请求飞出去又飞回来，获取后端Promise 对象从 pending 变成 fulfilled，数据数据安安静静躺在 response 里。获取后端就这么简单，数据也这么容易踩坑。获取后端

我见过太多人卡在第一步：跨域。数据前端跑在 localhost:3000，获取后端后端在 localhost:8080，数据浏览器直接甩你一个 CORS 错误，获取后端红得刺眼。数据这不是获取后端 JS 的问题，是浏览器安全策略在拦你。解决办法要么后端加 Access-Control-Allow-Origin 头，要么前端配代理。我一般选后者，webpack 的 devServer.proxy 或者 vite 的 server.proxy 配一行，请求从 3000 发出去，代理帮你转到 8080，浏览器以为同源，放行。

跨域过了，接下来是 fetch 的坑。它跟 jQuery 的 $.ajax 不一样，fetch 不会因为 HTTP 状态码是 404 或 500 就 reject。只有网络故障才触发 catch。所以你得手动检查 response.ok，不然 404 页面返回的 HTML 会被你当 JSON 解析，然后报一个莫名其妙的语法错误。我习惯这么写：

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

够用，但不够顺手。实际项目里我会包一层 request 函数，统一处理 baseURL、超时、token 注入和错误提示。比如用 AbortController 做超时：

function request(url, options = { }, timeout = 10000) {  const controller = new AbortController(); const timer = setTimeout(() => controller.abort(), timeout); return fetch(url, {  ...options, signal: controller.signal }) .finally(() => clearTimeout(timer)); } 

这样请求超过十秒自动断开，不会让用户对着转圈图标干等。AbortController 还能用来取消重复请求——搜索框输入时每次按键都发请求，旧请求没回来新请求又出去，结果顺序乱了。用 AbortController 把上一个掐掉，只保留最后一次。

axios 在国内用得更普遍，不是没道理。它自动把 JSON 转成对象，拦截器能统一加 loading 和错误处理，超时配置也直观。但 fetch 是原生 API，不依赖第三方库，体积小，Service Worker 里也能用。选哪个看场景，别为了用而用。我自己的小工具用 fetch，公司项目用 axios，就这么简单。

拿到数据之后才是真正的麻烦。后端返回的字段名可能是 user_name，前端习惯 userName，手动映射容易漏。我现在的做法是让后端直接返回 camelCase，改不了就在前端加一层 normalize 函数，集中处理字段转换。别在组件里到处写 data.user_name，改起来想死。

还有一个细节：response.json() 只能调用一次。因为它是流，读完了就没了。如果你先 response.text() 再 response.json()，第二个会报错。调试的时候可以先 clone 一份：const clone = response.clone()，一个用来打日志，一个用来解析。

最后说个真事。上周帮同事排查一个 bug，接口返回的数据在 Chrome 里正常，在 Safari 里字段全是 undefined。查了半天发现后端返回的 JSON 里有 NaN，Chrome 的 JSON.parse 容忍了，Safari 直接抛错。后来让后端把 NaN 转成 null 才解决。浏览器差异这种事，文档不会写，踩过一次就记住了。

获取后端数据这事，核心就三句话：请求发出去，响应接回来，错误处理好。剩下的都是细节堆出来的经验。