后端路由在 url 匹配路径时即被触发，无论请求来自浏览器直接导航还是前端 fetch 调用；但二者在用途、能力与交互模式上存在根本差异：导航主要用于页面跳转与 html 渲染，而 fetch 专为程序化数据交互设计，支持任意 http 方法、自定义头、json 体及错误处理。
在 Web 开发中，一个常见的误解是认为“只有调用 fetch() 才会触发后端路由”。实际上，只要客户端（浏览器）发起符合该路由规则的 HTTP 请求，服务端就会执行对应逻辑——无论是用户在地址栏输入 /restaurants 并回车，还是前端 JavaScript 执行 fetch('/restaurants')，Express 的 app.get('/restaurants', ...) 回调都会被调用，并返回 ALL_RESTAURANTS 数组的 JSON 数据。
然而，触发相同路由 ≠ 实现相同目的。关键区别在于：
✅ 浏览器导航（如访问 /restaurants）
- 发起的是 同步、阻塞式 GET 请求；
- 响应内容默认被浏览器解析为文档（HTML），若后端返回纯 JSON（如本例），浏览器通常会直接渲染为原始文本或下载文件；
- 无法发送 POST/PUT/DELETE 等非 GET 请求；
- 无法设置自定义请求头（如 Authorization、Content-Type: application/json）；
- 无法携带请求体（body），因此无法提交表单数据或 JSON 负载；
- 虽可传递查询参数（如 /restaurants?city=Seattle），但缺乏对响应的程序化控制（如错误重试、加载状态、条件渲染）。
✅ 前端 fetch（如 fetch('/restaurants')）
- 是非阻塞、可编程的数据获取方式，运行在 JavaScript 上下文中；
- 支持全部 HTTP 方法：GET、POST、PATCH、DELETE 等；
- 可自由设置 headers、body、credentials（如 cookies）、超时等选项；
- 返回 Promise<Response>，便于链式处理：解析 JSON、校验状态码、捕获网络异常；
- 与 UI 框架（React/Vue）天然集成，实现动态渲染、分页加载、搜索过滤等交互逻辑。
例如，以下代码不仅获取餐厅列表，还实现了错误处理与加载反馈：
const getRestaurants = async () => {
try {
const response = await fetch('/restaurants', {
method: 'GET',
headers: { 'Accept': 'application/json' }
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const restaurants = await response.json();
return restaurants;
} catch (err) {
console.error('Failed to fetch restaurants:', err);
throw err;
}
};
// 使用示例（React 中）
useEffect(() => {
getRestaurants().then(data => setRestaurants(data));
}, []);⚠️ 注意事项
- CORS 限制：若前端与后端跨域，浏览器会拦截非简单请求（如带自定义 header 的请求），需后端配置 Access-Control-Allow-Origin 等响应头；
- 安全性：导航会自动携带 cookies（若 credentials: 'include'），而 fetch 默认不发送，需显式设置；
- SEO 与首屏体验：纯前端 fetch 无法被搜索引擎直接抓取内容，SSR/SSG 或服务端预取仍是优化关键；
- 语义合理性：/restaurants 作为 API 端点，本就不应被用户直接访问——它面向机器而非人，理想情况下应配合前端路由（如 /app/restaurants）展示结构化 UI。
总之，后端路由是服务端逻辑的入口，而 fetch 是前端主动调用该入口的“工具”。导航是被动的、面向文档的；fetch 是主动的、面向数据的。理解这一分层，才能构建出响应迅速、体验流畅、可维护性强的现代 Web 应用。
立即学习“前端免费学习笔记（深入）”；
