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,就会把错误响应当正常数据用。
本文档主要讲述的是使用JSON进行网络数据交换传输;JSON(JavaScript ObjectNotation)是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成,非常适合于服务器与客户端的交互。JSON采用与编程语言无关的文本格式,但是也使用了类C语言的习惯,这些特性使JSON成为理想的数据交换格式。 和 XML 一样,JSON 也是基于纯文本的数据格式。由于 JSON 天生是为 JavaScript 准备的,因此,JSON的数据格式非常简单,您可以用 JSON 传输一个简单的 St
立即学习“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 本身,但在每个实际接口调用里都绕不开。










