按钮点击后须立即更新ui（禁用、改文案、加动效），再发请求；失败时需根据具体错误码还原状态并提示，服务端渲染需保证首屏状态一致。

按钮点击后立即反馈，不等接口返回

用户点“加入购物车”时，如果界面毫无反应，会误以为没点上或卡了。必须在 click 事件触发后立刻更新 UI：禁用按钮、切换文字（比如从“加入购物车”变成“已添加”）、加个微动效（如图标轻微放大）。这一步和后端完全解耦，纯前端控制。

常见错误是把所有逻辑塞进一个 fetch 的 .then() 里，导致用户点了却看不到任何响应。正确做法是先执行 UI 变更，再发请求：

button.addEventListener('click', () => {
  button.disabled = true;
  button.textContent = '已添加';
  // 立即执行，不等待网络
  addToCartAPI(productId).catch(() => {
    // 失败再还原状态或弹提示
    button.disabled = false;
    button.textContent = '加入购物车';
  });
});

后端成功才持久化状态，失败要回滚

前端的“已添加”只是临时示意，真实状态以接口返回为准。尤其注意：若接口返回 400（库存不足）、401（未登录）、500（服务异常），必须撤回 UI 变更，并给出具体原因——不能只写“添加失败”。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

关键细节：

• fetch 默认不抛错，response.ok 为 false 时不进 catch，得手动判断
• 不要用 location.reload() 刷新页面来“同步状态”，破坏用户体验
• 推荐用轻量级状态管理（如单个 cartCount 变量）配合局部 DOM 更新，而非重绘整个购物车浮层

两段式设计对 SSR 和 SEO 的影响

如果是服务端渲染（如 Next.js、Nuxt），首次加载时按钮文案和禁用状态必须和服务端输出一致，否则会触发 React/Vue 的 hydration mismatch 警告。常见坑是服务端没判断登录态，渲染出可点击按钮，但客户端一激活就因未登录直接禁用——视觉跳变且报错。

解决方案：

• 服务端根据 req.session?.userId 或 token 有效性，决定初始 disabled 属性和文案
• 客户端初始化时，读取服务端注入的 JSON（如 window.__INITIAL_CART__）作为状态源
• 避免在 useEffect 或 mounted 钩子中才去拉购物车数量，导致按钮状态延迟更新

两段式不是加个 loading 就完事，核心在于「视觉承诺」和「状态权威」的分离：前端承诺响应速度，后端保留最终解释权。最容易被忽略的是服务端与客户端状态不一致引发的 hydration 错误，以及错误码未映射到具体提示语，让用户反复点、反复失败。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！