什么是API_如何使用javascript发起网络请求【教程】

11次阅读

API是约定的通信规则;javaScript用fetch或xmlhttpRequest调用Web API;fetch更现代简洁,需手动处理cookiejsON解析、HTTP错误及URL参数,POST传json须设Content-Type并序列化body。

什么是API_如何使用javascript发起网络请求【教程】

API 不是某种工具或代码,它是一套约定好的通信规则——就像餐厅的菜单,你点菜(发请求),厨房按标准流程做(服务器处理),再把成品端给你(返回数据)。javascript 本身不“有” API,但它能通过 fetchXMLHttpRequest 调用 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' })

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

  • '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,比反复重试更省时间。

text=ZqhQzanResources