如何在JavaScript中将planetData数组正确赋值给this.data的planets属性

• 报错Cannot access 'planetData' before initialization是因为let声明的变量存在暂时性死区：你在代码中先执行了this.data = { planets: [planetData] }，之后才用let planetData = []声明变量，在变量声明前访问就会触发该报错。
• 另外你的行星数据是通过异步fetch请求获取的，就算调整变量声明顺序，初始化this.data时请求还未返回，拿到的也只能是空数组，必须等所有请求完成后再赋值才符合需求。

你只需要调整两处核心逻辑即可：

1. 先初始化this.data.planets为空数组，不提前引用未声明的planetData
2. 在Promise.all的成功回调里把请求完成的planetData赋值给this.data.planets，注意保留this指向
   同时可以优化数组合并逻辑，不需要循环逐元素拼接，直接合并整页返回结果即可。

修改后的完整代码 #

export default class Application extends EventEmitter {
  constructor() {
    super();

    this.config = config;
    // 先初始化planets为空数组，等异步请求完成后再更新值
    this.data = {
      planets: []
    };

    this.init();

    let url;
    let count;
    let planetData = []
    let promises = [];

    // 提前存储this指向，避免回调内this指向错误
    const that = this;

    // 翻页请求
    for (let p = 1; p < 7; p++) {
      url = `https://swapi.boom.dev/api/planets?page=${p}`;

      // 发起请求存入promise数组
      promises.push(fetch(url).then(res => res.json())
        .then(data => {
          // 优化：直接合并整页结果，无需逐次循环拼接
          planetData = planetData.concat(data.results);
        }));
    }

    Promise.all(promises)
      .then(() => {
        console.log(planetData.length, '=>', planetData);
        // 异步请求全部完成后，赋值给data的planets属性
        that.data.planets = planetData;
        // 如果有后续依赖行星数据的逻辑，可以在这里触发执行
      })
  }
}

如果后续需要在其他类方法里访问this.data.planets，要确保是在异步请求完成后再访问，否则拿到的还是初始空值。你继承了EventEmitter，可以在赋值完成后发射自定义事件通知其他逻辑数据已就绪，比如添加that.emit('planetsLoaded')，其他逻辑监听该事件即可。

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