异步查询选择器访问

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

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

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

querySelector立即搜索 DOM并返回结果（如果null找不到您要查找的内容）。

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

如果您想检测某个元素何时出现，那么您需要：

• 监听DOM 的变化
• 使用 DOM 进行轮询（例如，querySelector在递归setTimeout或 a中） ，直到它确实出现为止（即构建上述自动返回机制）。setIntervalquerySelector

new Promise(...)如果您想要await结果，您可以使用其中任何一种方法。

也就是说，async函数之外的任何内容都会收到 Promise，因为async函数也无法将异步代码转换为非异步代码。