时间戳

首页 > 解决方案 > 您如何访问和存储“已实现”承诺的值/属性？

javascript - 您如何访问和存储“已实现”承诺的值/属性？

问题描述

我正在尝试构建一个渲染某个星球细节的对象。我使用 fetch 方法，它返回一个承诺。如何从 [[PromiseResult]] 对象中获取值以填充“render()”中的详细信息。我尝试从渲染中的 ${ } 调用 fetchPlanetData().then(data=>data.(any property)（它们现在有占位符），但它总是返回“未定义”。提前致谢。

class PlanetDetails {
  constructor(planet) {
    this.planet = planet;
    //this.fetchPlanetData();
    this.render();
  }

  async fetchPlanetData() {
    const result = await fetch(`https://api.le-systeme-solaire.net/rest/bodies/${this.planet}`);
    this.data = await result.json();
    return this.data;
  }

  render() {
    const hook = document.querySelector('.moons');
    const container = document.createElement('div');
    container.className = 'container';
    container.innerHTML = `
    <p>The average temperature is:${'averageTemp'}</p>
    <p>The escape velocityis:${'escape'}</p>
    <p>The gravity is ${'gravity'} times that of Earth's.</p>
        `;

    hook.append(container);
  }
}

const planetDetails = new PlanetDetails('neptune');

console.log(planetDetails.fetchPlanetData());``

标签： javascriptasync-await

解决方案

不要放入this.render构造函数，而是调用一个新的异步方法init并从构造函数调用它。await从 中获取数据fetchPlanetData，将其分配给this.data，然后调用this.render。

注意：看起来您没有使用this.data渲染方法中的任何数据。例如，当您编码${'averageTemp'}时，您的意思是${this.data.averageTemp}？

class PlanetDetails {

  constructor(planet) {
    this.planet = planet;
    this.init();
  }

  async init() {
    this.data = await this.fetchPlanetData();
    this.render();
  }

  async fetchPlanetData() {
    const result = await fetch(url);
    return result.json();
  }

  ...

}

推荐阅读