JS类结构调用fetch获取数据后生成HTML内容无法渲染该如何解决

数据老陈

2026-9-30

问题成因

问题核心是fetch是异步网络请求API，代码执行顺序不符合预期：

Table构造函数执行时，发起fetch请求后，主线程不会等待请求返回，会立即执行this.fill()方法
此时fetch的响应还未返回，this.arr还是初始化的空数组，forEach遍历无内容可渲染
后续fetch请求成功把数据写入this.arr时，渲染方法已经执行完毕，不会重新触发渲染，因此页面没有内容展示。

解决方案

调整调用逻辑，等fetch拿到数据后再执行渲染方法即可，修改后代码如下：

class AutoComplete{
  constructor(){
    console.log("constructor autocomplete")
    this.table = new Table();
  }
}

class Table{
  constructor(){
    console.log("constructor table")
    this.arr = []
    
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json())
    .then((data) => {
        this.arr = data
        // 数据加载完成后再调用渲染方法
        this.fill()
    });
    // 删掉原构造函数末尾的this.fill()调用
  }
  
  fill = () => {
    console.log("fill");
    const content = document.querySelector("#content");
    this.arr.forEach( ct => {
        const div = document.createElement("div");
        div.innerText = ct.body;
        content.appendChild(div);
    });
  }
}

let autoc = new AutoComplete();