ES6类构造函数、init方法与async异步逻辑运行异常如何修复

• 选择器返回值类型不匹配：原代码constructor中使用document.querySelector，返回单个DOM节点或null，没有length属性，所以this.tableOne.length > 0永远返回false。
• DOM查询时机错误：new Tables()在全局执行，此时DOM还未完成加载，constructor中的DOM查询无法匹配到元素，即使换成querySelectorAll也会拿到空NodeList。
• 异步逻辑缺陷：fetchDataTableOne无返回值，且未处理网络请求、JSON解析的异常场景；如果this.tableOne是NodeList，直接调用insertAdjacentHTML会报错。

已满足所有要求：保留this.tableOne = document.querySelectorAll('.displayTableOne')在constructor中，修复全部运行问题，修复后代码如下：

export default class Tables {
  constructor() {
    // 按要求保留该语句在constructor中
    this.tableOne = document.querySelectorAll('.displayTableOne');
  }

  init() {
    if (this.tableOne.length > 0) {
      const fetchDataTableOne = async () => {
        // 新增异常捕获避免静默失败
        try {
          const res = await fetch('feed.json');
          if (!res.ok) throw new Error('网络请求异常');
          this.tableOneBlocks = await res.json();
          
          // 遍历NodeList中的所有匹配元素插入内容
          this.tableOne.forEach(tableEl => {
            Object.entries(this.tableOneBlocks).forEach(([key, value]) => {
              tableEl.insertAdjacentHTML('beforeend', `
                <tr>
                  <td data-label="Name">${value.name}</td>
                  <td data-label="Code">${value.code}</td> 
                  <!-- 其余自定义字段 -->
                </tr>
              `);
            });
          });
          return this.tableOneBlocks;
        } catch (err) {
          console.error('表格数据加载失败：', err);
          throw err;
        }
      }

      fetchDataTableOne()
        .then(tableOneBlocks => console.log('数据加载完成：', tableOneBlocks))
    }
  }
}

// 将实例化移动到DOMContentLoaded回调中，保证constructor执行时DOM已加载完成
document.addEventListener("DOMContentLoaded", function() {
  const components = {
    Tables: new Tables()
  };
  components.Tables.init();
});

1. 替换constructor中的选择器为要求的document.querySelectorAll，返回NodeList类型，具备length属性，条件判断可正常生效。
2. 调整实例化位置到DOMContentLoaded回调内部，保证constructor执行时DOM已经渲染完成，可正常匹配到.displayTableOne元素。
3. 异步逻辑新增异常捕获，处理网络错误、接口报错、JSON解析失败等场景。
4. 新增NodeList遍历逻辑，对所有匹配到的.displayTableOne元素插入表格行，避免直接调用单个DOM方法报错。

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