核心是用 fetch() 发请求、async/await 处理响应；GET 需检查 response.ok 并调用 response.json()；POST 根据 Content-Type 选 JSON.stringify()、FormData 或 URLSearchParams；404/500 不触发 catch，须手动判断 status；token 应从内存或 cookie 读取，设 Authorization 头；错误需全覆盖处理。
JavaScript 与后端 API 交互，核心就一条：用 fetch() 发请求，用 async/await 处理响应，别硬套 XMLHttpRequest 或第三方库（除非项目强制要求）。
如何用 fetch() 发 GET 请求并处理 JSON 响应
这是最常见场景，比如拉用户列表。注意 fetch() 只在网络失败时 reject（如断网），HTTP 状态码 404、500 不会触发 catch —— 必须手动检查 response.ok。
- 直接
await fetch('/api/users')，然后调response.json()解析体，不能跳过这步 - 必须加
if (!response.ok) throw new Error(response.status)，否则 401 错误静默吞掉 -
浏览器跨域时，后端没配
Access-Control-Allow-Origin会直接报CORS error，和 JS 代码无关
POST 提交表单数据该用 FormData 还是 JSON.stringify()
取决于后端接口约定的 Content-Type。传错格式，后端收不到字段，连日志都查不到原因。
- 后端接收
application/json：用JSON.stringify({ name: 'Alice' })，且必须设headers: { 'Content-Type': 'application/json' } - 后端接收
multipart/form-data（比如带文件上传）：用new FormData()，不设Content-Type（浏览器自动加 boundary） - 后端接收
application/x-www-form-urlencoded：用new URLSearchParams({ name: 'Alice' }).toString()，设Content-Type为对应值
为什么 fetch() 的 catch 捕不到 404 或 500
因为 fetch() 的 Promise 只在网络异常（DNS 失败、连接中断）时 reject；HTTP 状态码属于响应体的一部分，得靠 response.ok 或 response.status 判断。
php中级教程之ajax技术
下载
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
立即学习“Java免费学习笔记（深入）”；
-
try { const res = await fetch('/api/user/999'); if (!res.ok) throw res; }是标准写法 - 直接
res.json()前必须确认res.status !== 204，否则会报Unexpected end of JSON input - 想统一处理错误？封装一层函数，内部检查
ok和status，再抛出自定义错误
Token 认证怎么安全塞进请求头
别把 token 存 localStorage 后每次手动取；也别写死在代码里。要用 Authorization 字段，且避免 XSS 泄露。
- 从
document.cookie或内存变量（如模块级let authToken）读 token，不走localStorage.getItem() - Header 写成
{ 'Authorization': 'Bearer ' + token }，注意空格不能少 - 敏感操作（如删账号）建议额外加
X-Confirm: true等自定义 header，后端双校验 - token 过期响应是 401，但前端收到后不能只弹提示——要清掉本地 token 并跳登录页，否则下次请求又 401
真正难的不是发请求，而是错误路径全覆盖：网络中断、超时、token 过期、字段名拼错、后端返回空数组却当成对象解构……这些地方漏一个，线上就白屏或静默失败。
