为什么脚本中的NodeList是空的，但Chrome控制台中却没有？

Question

我正在使用异步等待函数执行第一步，目前正在 JSONPlaceholder 网站上进行尝试。 我已成功获取数据，现在我想向每个“a”标签添加事件侦听器。问题如标题所述：脚本中 getElementByClassName 或 querySelectorAll 的结果为空，但在浏览器中却有效！我想我尝试访问这些元素是在异步函数结束之前运行的。如果是的话应该怎么做？

我尝试过：将脚本放在 html 正文的最末尾（认为它将在加载其他所有内容后运行）；在异步函数的末尾，但这不起作用。

我现在尝试运行的脚本很简单（文件名是“posts.js”）：*post-item 是标签的类名

let catalogItems = document.querySelector('[data-catalog-items]');
let postItems = [...catalogItems.getElementsByClassName('post-item')];
console.log(postItems);

我的异步函数：

class HTTPResponseError extends Error {
    constructor(response) {
        super(`HTTP Error Response: ${response.status} ${response.statusText}`);
        this.response = response;
    }
}

const getPostItems = async ({limit, page}) => {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`);
        if (!response.ok) {
            throw new HTTPResponseError(response);
        }
        const total = +response.headers.get('x-total-count');
        const items = await response.json();
        return {items, total};
    } 
    catch (err) {
        console.error(err);
    }
}

Answer 1

您完成查询后可以参考postItems。

异步函数总是返回 Promise。

getPostItems.then((data) => {
  console.log(postItems)
})

这两段代码有点不清楚，但我希望我是对的。

Answer 2

如果您在 script.js 文件的开头使用此脚本：我有同样的问题，并且我已经像这样恢复了：

setTimeout(() => {/*code here*/},1)

这不是最好的解决方案，但它确实有效。我想我们可以用 onload 做点什么，但我没有尝试