前端技术文章
-
Fetch 调用 AbortController 取消后，catch 和 finally 仍会按 Promise 规则执行；真正需要防止的是旧请求在 await 后继续更新业务状态。本文用 signal.aborted、请求代次和 finally 清理讲清排查与修复方法。168 收藏 -
Vite 路由使用动态 import 后首屏仍然偏大，通常不是分包失效，而是入口静态依赖、共享依赖或 CSS 仍被首屏带入。本文用构建 manifest 和模块边界逐层定位原因。343 收藏 -
Vite 环境变量未出现在客户端时，先检查 VITE_ 前缀，再核对 mode、.env 文件和 envPrefix 配置；数据库密码、私钥等服务端秘密不应通过改前缀暴露。464 收藏 -
用模板字面量类型生成 xxxChanged 事件名，并通过泛型与索引访问类型让回调参数跟随属性类型推导，最后说明动态字符串和可选属性的边界。247 收藏 -
TypeScript 条件类型左侧使用裸类型参数时，会对联合类型逐成员计算。本文用 ToArray 示例解释分发原因，并说明如何用方括号关闭分发。447 收藏 -
用 Vue Router 的 scrollBehavior 区分新导航、浏览器前进后退、hash 锚点和异步内容，配置固定头部偏移并排查滚动位置恢复异常。133 收藏 -
Vue 3 使用 provide/inject 传递跨组件状态时，字符串键容易让类型变成 unknown 或 undefined。本文用 InjectionKey 绑定上下文类型，并说明 readonly、必需注入、可选注入和默认值的边界。247 收藏 -
React useMemo 依赖数组中的对象每次渲染都重新创建时，即使字段不变也会重复计算。本文用引用相等、原始依赖和 useEffect 场景说明正确处理方式。297 收藏 -
React Suspense 的 fallback 只负责等待态，数据 Promise reject 后要由 Error Boundary 展示失败态。本文用一个可重试的 Promise 状态说明如何接入 Try again、resetKeys 和缓存边界。379 收藏 -
CSS sticky 不生效时，重点检查 top 偏移、父容器 overflow、实际滚动祖先和可用高度差，按清单定位错误参照并修复。161 收藏 -
CSS Flex 子元素撑破容器，最常见原因不是父容器宽度失效，而是 flex 子项默认的自动最小尺寸被长文本、不可断 URL 或显式宽度撑住。本文从 min-width: 0 入手，配合换行和滚动边界，整理一套可复用的排查方法。348 收藏 -
FormData 上传文件时不要手动设置 multipart/form-data 的 Content-Type，浏览器需要根据请求体自动生成 boundary。本文用 fetch 示例说明正确写法，并给出从请求头、字段名和文件对象排查上传失败的方法。353 收藏 -
前端用 fetch 下载文件时，读取 Content-Disposition 中的 filename* 或 filename，再结合 Blob URL 和 a.download 保留后端文件名；跨域场景还要暴露响应头。231 收藏 -
fetch 遇到 404 不进入 catch，是因为请求已经拿到了 HTTP 响应。本文用 response.ok、status 和 JSON 解析示例说明正确的错误处理方式。481 收藏 -
用 TypeScript 区分联合建模请求状态，让 loading、success、error 的字段访问安全，并用 never 检查新增状态是否遗漏。292 收藏