异步querySelector访问

Question

我正在尝试访问df-chips。

​

​

然而，这并不是一见钟情，所以我试图用asyng / await来访问它。但是..。我不擅长javascript，所以我做错了什么，我不知道是什么。

这是我的密码：

// Function to catch asynchronous that node
const asyncQuerySelector = async (node, query) => {
  try {
     if (node.querySelector(query)){
      return await node.querySelector(query);
     }
  } catch (error) {
    console.error(`Cannot find ${query ? `${query} in`: ''} ${node}.`, error);
    return null;
  }
};

const root = document.querySelector('#messageList')
const foo = asyncQuerySelector(root, 'df-chips')

但我得到了一个null承诺的结果：

​

​

Answer 1

谢谢你的帮助

我已经创建了这个解决方案，它运行得很好(不能判断它是否有效)

const callback = function(mutationsList, observer) {
  // Use traditional 'for loops' for IE 11
  for(const mutation of mutationsList) {
    try{
      if (mutation.addedNodes[0].localName == 'df-chips'){
        console.log(mutation.addedNodes[0])
      }} catch(error){
          console.log(error)
        }
    }
};

foo = document.querySelector('#messageList')

// Options for the observer (which mutations to observe)
const config = {childList: true, subtree: true };

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(foo, config);

Answer 2

async函数是允许您通过await关键字管理承诺的工具。

querySelector不返回承诺，所以await对它没有意义，所以首先使用async是没有意义的。

querySelector立即搜索DOM并返回结果(如果找不到您要查找的内容，则为null )。

它没有任何内置的自动重试机制。

如果要检测元素何时出现，则需要：

• 收听DOM的突变
• 投票(例如，在递归querySelector或setInterval中使用querySelector )投票DOM，直到它出现(即构建上述的自动返回机制)。

如果您想要对结果进行new Promise(...)，可以使用await包装这些方法中的任何一种。

也就是说，async函数之外的任何内容都将是接受承诺，因为async函数也不能将异步代码变成非异步代码。