自定义asyncQuerySelector获取动态加载df-chips返回null如何解决

现有代码的问题 #

• 没有等待元素渲染的逻辑：你的asyncQuerySelector仅在调用时执行了一次元素查询，如果此时df-chips还没渲染，就不会进入if分支，函数没有任何等待逻辑，自然拿不到后续才出现的元素。
• 误用await：node.querySelector是同步API，不会返回Promise，对它使用await没有任何效果。
• 未正确处理async函数返回值：async函数返回的始终是Promise对象，你没有用await或.then()处理返回值，直接拿到的foo是Promise实例，不是目标元素本身。

修复方案 #

可以用MutationObserver监听父节点的DOM变化，直到匹配到目标元素后再返回，实现代码如下：

const asyncQuerySelector = (node, query, timeout = 10000) => {
  return new Promise((resolve, reject) => {
    // 先查询一次，避免元素已经存在的情况
    const existedEl = node.querySelector(query)
    if (existedEl) {
      resolve(existedEl)
      return
    }
    // 超时兜底，避免无限等待
    const timeoutTimer = setTimeout(() => {
      observer.disconnect()
      reject(new Error(`查询超时：未找到${query}元素`))
    }, timeout)
    // 监听DOM变动
    const observer = new MutationObserver(() => {
      const targetEl = node.querySelector(query)
      if (targetEl) {
        clearTimeout(timeoutTimer)
        observer.disconnect()
        resolve(targetEl)
      }
    })
    observer.observe(node, {
      childList: true,
      subtree: true
    })
  })
}

// 调用示例
const init = async () => {
  try {
    const root = document.querySelector('#messageList')
    if (!root) throw new Error('父节点#messageList不存在')
    const foo = await asyncQuerySelector(root, 'df-chips')
    // 拿到元素后执行你的后续逻辑
    console.log('获取到df-chips元素：', foo)
  } catch (err) {
    console.error(err)
  }
}

init()

以上代码会持续监听#messageList下的所有DOM更新，一旦df-chips元素渲染完成就会返回，同时设置了10秒的超时时间，避免元素永远不出现导致程序卡住。

内容的提问来源于stack exchange，提问作者OK 400