API是什么？JS发起请求详解

API本质上是一套约定的通信规则，如同餐厅菜单般定义了客户端与服务器之间如何“点菜”和“上菜”，而JavaScript通过fetch（现代推荐）或XMLHttpRequest发起网络请求；fetch语法简洁、基于Promise，但需手动处理cookie携带、JSON解析、HTTP错误判断及URL参数编码，POST发送JSON时更必须设置Content-Type并序列化body——掌握这些关键细节，才能真正用好Web API，避免常见坑。

API 不是某种工具或代码，它是一套约定好的通信规则——就像餐厅的菜单，你点菜（发请求），厨房按标准流程做（服务器处理），再把成品端给你（返回数据）。JavaScript 本身不“有” API，但它能通过 fetch 或 XMLHttpRequest 调用 Web API 发起网络请求。

什么时候该用 fetch 而不是 XMLHttpRequest

fetch 是现代浏览器的标准方案，语法简洁、基于 Promise，适合绝大多数场景；XMLHttpRequest 主要用于需要精细控制上传进度、取消请求或兼容 IE10/11 的老项目。

• fetch 默认不带 cookie，需显式加 credentials: 'include' 才能携带登录态
• fetch 返回的 Response 对象不是 JSON，必须调用 .json()（或 .text()）才能读取内容，否则只是个流对象
• fetch 只在网络错误（如断网、DNS 失败）时 reject，HTTP 状态码 404、500 不会触发 catch，得手动检查 response.ok

fetch 发 GET 请求的典型写法和常见坑

最简 GET 示例：

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

• URL 中的查询参数必须手动拼接或用 URLSearchParams 构造，fetch 不自动处理对象参数
• 中文或特殊字符要先 encodeURIComponent，否则可能被截断或报 400
• 如果后端返回的是纯文本（比如 CSV）、XML 或 Blob，别硬调 .json()，会抛错

POST 提交 JSON 数据时必设的两个头

发送 JSON 必须同时满足：

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

• 'Content-Type': 'application/json' 告诉后端“我传的是 JSON”，否则后端可能解析为空对象
• body 必须是字符串，JSON.stringify() 不可省略；直接传对象会变成 [object Object]
• 如果后端要求 form-data，就别用 JSON.stringify，改用 FormData 实例，且不要设 Content-Type（浏览器会自动生成带 boundary 的头）

真正容易出问题的，往往不是语法，而是对状态码、响应体类型、跨域限制、cookie 携带逻辑这些隐性契约的理解偏差。多看一眼 res.headers.get('content-type') 和 res.status，比反复重试更省时间。

到这里，我们也就讲完了《API是什么？JS发起请求详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！