前端技术文章
-
Vue computed getter 不应修改自己读取的响应式依赖，否则会把派生值和源状态连成循环。本文用最小示例解释回写原因，并给出事件处理器、纯 computed、watch 和 writable computed 的分工边界。352 收藏 -
CSS container query 让卡片根据父容器宽度切换单列与双列布局，本文从 container-type、@container、命名容器、cqi 和降级方案讲清可复用组件的响应式边界。349 收藏 -
文章 · 前端 | 3天前 | 前端 · javascript · Fetch API · Promise · 异步控制 · JavaScript Fetch Promise.all AbortController AbortSignal 并发请求取消
Promise.all 失败只代表聚合结果不可用，不会自动取消其他请求。本文用 AbortController、共享 AbortSignal 和请求代次，处理并发请求失败、切页、重试与迟到响应。347 收藏 -
Vite 路由使用动态 import 后首屏仍然偏大，通常不是分包失效，而是入口静态依赖、共享依赖或 CSS 仍被首屏带入。本文用构建 manifest 和模块边界逐层定位原因。343 收藏 -
WebSocket close code 排查不要只盯着数字：浏览器主动关闭只能使用 1000 或 3000–4999，1006 等保留码只表示观测到的异常；结合 reason、wasClean、readyState 和重连退避，才能定位协议、消息大小、服务端和网络问题。341 收藏 -
Fetch API 的 Response.json() 失败后不能直接再读同一个响应体。本文用 text() 与 clone() 解释 bodyUsed 边界，并给出保留原始文本、记录状态码和控制日志内容的实用写法。339 收藏 -
文章 · 前端 | 3天前 | Response · javascript · Fetch API · 异步请求 · 前端排错 · Fetch ReadableStream Response.json bodyUsed 前端请求
Fetch 的 Response body 是一次性可读流。response.json() 消费后，response.text()、blob() 或第二次 json() 都可能因 body 已使用而失败。本文解释 bodyUsed、clone 和单次解析的边界，给出可维护的响应处理方式。323 收藏 -
用 Blob.slice 把大文件切成固定分片，配合稳定恢复标识、单片重试和已完成分片查询，实现刷新页面后继续上传的前端方案。321 收藏 -
TypeScript 项目遇到 structuredClone 类型缺失时，按浏览器与 Node.js 宿主分别检查 target、lib、types 和 noLib，再区分编译期声明、运行时支持与 DataCloneError 数据边界。310 收藏 -
用 useActionState 让 Server Action 在校验失败时同时返回字段值和错误信息，避免表单回显为空，并区分预期错误与异常。308 收藏 -
前端使用 ReadableStream 逐块读取 fetch 响应时，停止按钮应通过 AbortController 取消底层请求，并在 reader、TextDecoder 和异常收尾之间划清边界。306 收藏 -
用 Fetch 读取 Response.body 的 ReadableStream，按块更新页面，并处理 UTF-8 中文跨块、HTTP 异常、空 body 和取消读取。304 收藏 -
fetch 收到 404 时，Promise 通常仍会 resolve，因为服务器已经返回了 HTTP 响应。本文用 Response.ok、Response.status 和主动抛错讲清 catch 的正确使用边界。299 收藏 -
React useMemo 依赖数组中的对象每次渲染都重新创建时，即使字段不变也会重复计算。本文用引用相等、原始依赖和 useEffect 场景说明正确处理方式。297 收藏 -
CSS container query 不生效时，先确认父元素设置了 container-type，再检查查询命中的容器、宽度条件和浏览器支持；文中给出卡片布局的最小写法与降级方案。291 收藏