JavaScript如何调用后端API？【教程】

本文深入解析了JavaScript中使用fetch调用后端API的核心实践与常见陷阱：从最简GET请求出发，强调必须手动检查res.ok或status以应对404/500等业务错误；详解URLSearchParams安全拼参、POST时Content-Type的精准设置、Cookie携带的credentials配置；直击跨域本质——前端无法绕过CORS，关键在于后端正确返回Access-Control-Allow-Origin等响应头；并指出健壮错误处理需兼顾网络异常与HTTP状态码+响应体业务错误，建议封装统一请求函数实现状态校验、错误归一化和超时控制（借助AbortController），最后点明真实开发中最耗时的并非发请求本身，而是对每个接口响应结构、认证方式、缓存策略等细节的精准适配与调试。

用 fetch 发 GET 请求最直接

浏览器环境里，fetch 是当前最常用、也最轻量的通信方式。它返回 Promise，天然支持 async/await，不用额外引入库。

常见错误是忽略网络失败和 HTTP 状态码异常——fetch 只在真正“请求没发出去”（如断网、DNS 失败）时 reject，而 404、500 这类响应仍会 resolve，必须手动检查 response.ok 或 response.status。

• GET 请求示例：

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

• 带查询参数建议用 URLSearchParams 构造，避免拼接出错：

  const params = new URLSearchParams({ page: '1', limit: '10' });
  await fetch(`/api/posts?${params}`);

• 默认不带 Cookie，如需携带登录态，得显式加 credentials: 'include'

POST 提交 JSON 数据要设好 Content-Type

后端通常依赖 Content-Type: application/json 来解析请求体。漏掉这个 header 是 400 错误的高频原因，尤其用 Express、FastAPI 等框架时。

• 正确写法：

  await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email: 'a@b.c', password: '123' })
  });

• 如果后端接收的是表单数据（application/x-www-form-urlencoded），就别用 JSON.stringify，改用 new URLSearchParams(formObj)
• 注意：body 必须是字符串、Blob、FormData 等可读流类型，不能直接传对象

跨域问题不是前端能绕开的

当域名、协议或端口不一致时，浏览器会拦截响应（即使后端已返回数据）。这不是 fetch 的限制，而是 CORS 安全机制。

• 前端唯一可控的是加 mode: 'cors'（默认值），但关键在后端是否返回了合法的 Access-Control-Allow-Origin
• 开发时本地启了 localhost:3000，后端在 localhost:8000，必须让后端允许该源，例如返回 Access-Control-Allow-Origin: http://localhost:3000
• 若需带认证（如 Cookie、Authorization header），后端还必须设置 Access-Control-Allow-Credentials: true，且此时 Access-Control-Allow-Origin 不能为 *

错误处理别只靠 try/catch

try/catch 只能捕获 fetch 抛出的网络异常，抓不到 4xx/5xx 响应。真实项目里，业务错误（如登录失败、权限不足）几乎都藏在响应体里。

• 建议封装一层请求函数，统一处理状态码和常见错误结构：

  async function request(url, options = {}) {
    const res = await fetch(url, options);
    if (!res.ok) {
      const err = await res.json();
      throw new Error(err.message || `HTTP ${res.status}`);
    }
    return res.json();
  }

• 后端返回格式不一致时（比如有时是 { code: 0, data: ... }，有时是裸对象），前端解析逻辑容易崩，最好在封装层做归一化
• 超时控制原生 fetch 不支持，需用 AbortController 配合 signal 选项

实际用起来，最难的往往不是发请求，而是对每个接口的响应结构、错误字段、认证方式、缓存策略做准确适配。这些细节不会写在文档里，得靠调试时多看 Network 面板里的 Response 和 Headers。

本篇关于《JavaScript如何调用后端API？【教程】》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！