javascript怎样与后端api进行交互【教程】

fetch 是 javaScript 与后端 API 交互的核心方法，需手动配置 headers（如 Authorization、Content-Type）、credentials、URLSearchParams 拼参，并在 then 中检查 response.ok 才能正确处理 http 错误。

javascript 与后端 API 交互，核心就是用 fetch 或 XMLHttpRequest 发起 HTTP 请求；现代项目基本只用 fetch，但得注意它不自动带 cookie、不拒绝非 2xx 状态码——这点和 jquery 的 $.ajax 行为不同，容易误判错误。

怎么发一个带 Token 的 GET 请求

多数 REST API 要求在请求头里传 Authorization: Bearer 。直接写 fetch 时别漏掉 headers 配置，且 token 字符串不能多空格或换行。

• fetch 默认不发送 cookie，如需（比如 session 登录态），必须显式加 { credentials: 'include' }
• token 从 localStorage 读取时，先做非空判断：const token = localStorage.getItem('auth_token') || ''，否则 Bearer NULL 会触发 401
• URL 拼接参数建议用 URLSearchParams，避免手动拼错 ? 和 &：fetch(`/api/users?${new URLSearchParams({ page: '1', limit: '10' })}`)

POST 提交 jsON 数据的正确写法

后端通常期望 Content-Type: application/json，且 body 是字符串。直接传对象会报错：TypeError: Request with GET/HEAD method cannot have body（如果误用了 GET）或 415 Unsupported Media Type（如果没设 header）。

• 必须用 JSON.stringify(data) 转成字符串，不能直接传对象
• 必须设置 headers: { 'Content-Type': 'application/json' }，fetch 不会自动推断
• 如果后端用 form-data 接收（比如上传文件），就别用 JSON，改用 FormData 对象，且不要手动设 Content-Type（浏览器会自动生成带 boundary 的 header）

如何可靠地处理 fetch 错误

fetch 只在网络彻底失败时 reject，HTTP 状态码 400、500 等都算“成功”，会进 then。不手动检查 response.ok 或 response.status，就会把错误响应当正常数据用。

立即学习“Java免费学习笔记（深入）”；

• 标准写法是在 then 里第一句加：if (!response.ok) throw new Error(`${response.status} ${response.statusText}`)
• catch 只捕获网络错误或 throw 出来的异常，不会捕获 401、404 这类响应
• 后端返回的错误详情（如 { "error": "email already exists" }）要等 response.json() 解析后才能拿到，不能在检查 ok 前就调用

真正麻烦的不是发请求，而是错误路径的分支覆盖：token 过期怎么刷新、429 限流怎么退避、网络中断时要不要缓存提交动作——这些逻辑不在 fetch 本身，但在每个实际接口调用里都绕不开。