html本身不提供网络请求组件化原生能力，需将请求逻辑嵌入customelements生命周期：在connectedcallback初始化请求，attributechangedcallback响应属性变更，observedattributes声明监听项，状态变更后必须调用_render()同步ui，且须手动管理加载态、错误、缓存与取消。
直接说结论：HTML 本身不提供“网络请求组件化”的原生能力，所谓“封装为组件行为”，本质是把请求逻辑嵌入自定义元素（customElements.define()）的生命周期中，并手动管理状态、错误、加载态与 UI 同步——不是加个标签就自动发起请求，而是你得亲手写清楚“什么时候发、发给谁、失败了怎么显、成功后怎么更新 DOM”。
customElements 中何时发起请求？别在 constructor 里调 fetch
constructor 是最常被误用的地方：此时元素刚创建，还没挂载到页面，this.isConnected 为 false，且无法读取属性值（如 this.getAttribute('url') 可能返回 null）。更关键的是，fetch 不该在此刻触发——用户还没看到组件，也不知是否需要它。
- ✅ 正确时机是
connectedCallback()：元素挂载后首次执行，适合初始化请求（如卡片加载数据） - ✅ 若需响应属性变更（比如 url 或 params 改了），必须在
attributeChangedCallback()里判断并重新 fetch - ❌ 避免在
disconnectedCallback()中 abort 请求：此时请求可能已发出或正在响应，abort 只能清理 pending 的 Promise，不能撤回已发请求
如何让请求参数随属性变化自动更新？必须声明 observedAttributes
自定义元素不会自动监听属性变化。你写了 <api-card url="/user/123"></api-card>，但除非你显式告诉浏览器“我要盯这个 url 属性”，否则改了它，组件根本不知道。
- 在类上定义静态 getter：
static get observedAttributes() { return ['url', 'method', 'params']; } -
attributeChangedCallback(attrName, oldValue, newValue)中做差异判断：仅当newValue !== oldValue才触发新请求，避免重复加载 - 注意：
params若是对象，需转成 JSON 字符串存为 attribute（如params='{"id":123}'），否则取出来是 [object Object]；更稳妥的做法是用dataset或内部 state 管理
请求状态怎么同步到 Shadow DOM？别只改 this._data 就完事
很多开发者设了 this._loading = true，却忘了刷新 UI——Shadow DOM 不会因为你改了一个私有变量就重绘。组件视觉没反应，不是请求没发，是 DOM 没更新。
- 每次状态变更（loading / error / data）后，必须调用一个渲染函数，例如
this._render() -
_render()应完全基于当前状态生成 HTML 片段：this.shadowRoot.innerHTML = this._loading ? '<div>加载中...</div>' : `<div>${this._data.name}</div>` - 若结构复杂，建议用
template+cloneNode(true)替代拼接字符串，避免 XSS 和结构错乱
跨环境请求域名怎么切？别硬编码在组件里
把 https://dev.api.com 写死在 customElements 类里，等于把部署配置塞进 UI 层，后期换环境就得改 JS 文件——这违背组件可复用原则。
- 推荐方案：通过全局配置对象注入，比如
window.API_CONFIG = { prod: 'https://api.example.com', dev: 'https://dev.api.example.com' }; - 组件内读取：
const baseUrl = window.API_CONFIG?.[this.getAttribute('env') || 'prod'] || 'https://api.example.com'; - 更健壮的做法是允许传入
base-url属性，优先级高于全局配置，方便单个实例覆盖
真正难的不是发请求，而是把 loading、error、retry、缓存、取消、节流这些现实世界里的毛刺，都稳稳地缝进组件的生命周期里。漏掉任意一环，用户看到的就是白屏、重复提交、旧数据残留——而这些都不会报错，只会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
