自定义元素中发起异步请求应在constructor初始化状态、connectedCallback中判重后执行，避免重复请求；动态依赖需await customElements.whenDefined()再操作；upgrade时用标志位防重；fetch必须try/catch并检查response.ok。

自定义元素里怎么发起异步请求

不能等 connectedCallback 才发请求——节点可能多次挂载/卸载，重复请求会浪费资源或触发竞态。推荐在 constructor 里初始化状态，在 connectedCallback 中判断是否已请求过，再决定是否发起。

• 用 fetch() 而非 XMLHttpRequest：更简洁、天然支持 async/await，且不会因跨域失败返回 status === 0 这种误导性值
• 请求前检查 this.hasAttribute('data-loaded') 或内部 flag（如 this._fetched = true），避免重复加载
• 若需响应式更新，把数据存入属性（this.data = ...）并触发 attributeChangedCallback 或手动调用 this.render()

如何让自定义元素等待组件定义完成再加载数据

如果自定义元素本身是动态导入的（比如用 import('./chart.js')），而它内部又依赖另一个尚未定义的自定义元素（如 x-api-client），直接在 connectedCallback 发请求会报错：目标元素未注册。

• 必须先确保依赖元素已定义，再调用 customElements.whenDefined('x-api-client') 等待其就绪
• 不要只 await import，还要显式 customElements.define()，否则 whenDefined 永远不会 resolve
• 示例写法：

  async connectedCallback() {
    await customElements.whenDefined('x-api-client');
    const client = document.createElement('x-api-client');
    this.appendChild(client);
    const data = await client.fetch('/users');
    this.render(data);
  }

升级已有节点时如何避免重复请求

customElements.upgrade(node) 会触发 connectedCallback，但如果页面初始 HTML 就包含 <x-user-card></x-user-card>，且你没做防重逻辑，每个升级都会再发一次请求。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 在 constructor 里设初始状态：this._isUpgraded = false
• 在 connectedCallback 开头加判断：if (this._isUpgraded) return; this._isUpgraded = true;
• 注意：SSR 渲染出的节点在 hydration 后也会被 upgrade，这个判断对 SSR 和客户端直出都有效

为什么 fetch 返回空字符串或 TypeError 却没报错

常见于本地开发时用 file:// 协议打开 HTML，或后端没配 CORS。此时 fetch() 不会进 .then()，而是直接 reject，但如果你没写 catch，错误就静默了。

立即学习“前端免费学习笔记（深入）”；

• 务必用 try/catch 包裹 await fetch()，或链式写 .catch(console.error)
• response.ok 必须手动检查——404、500 不会自动 throw，它们仍走 then
• 跨域失败时浏览器抛 TypeError: Failed to fetch，不是 status 0，别再用 xhr.status === 0 的旧逻辑去判

真正难处理的是多级嵌套自定义元素间的请求调度和生命周期耦合，比如父元素等子元素 ready 后才发汇总请求——这没法靠单个 whenDefined 解决，得靠事件通信或 Promise 链式传递。