17370845950

后端路由在 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，便于链式处理：解析 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 应用。