如何在方法中使用获取的数据作为参数

Question

我正在尝试制作一个从 SWAPI 获取所有行星的应用程序，然后将它们显示为页面上的框。我有 _load() 方法，它获取数据，还有 _render() 方法，它应该渲染框。 _render() 有 name, terrain, population 参数。

这是我的部分代码：

const box = document.createElement("div");
    box.classList.add("box");
    box.innerHTML = this._render({
      name: '',
      terrain: "placeholder",
      population: 0,
    });

    document.body.querySelector(".main").appendChild(box);

    this.emit(Application.events.READY);
  }

_load() 我在哪里获取数据

async function getPlanets() {
      const urls = Array.from({ length: 7 },
        (v, i) => `https://swapi.boom.dev/api/planets?page=${i + 1}`);

      const promises = urls.map(url => fetch(url)
        .then(res => res.json())
        .then(data => data.results));

      const planetData = (await Promise.all(promises)).flat();
      console.log(`Results for ${planetData.length} planets downloaded...`);
      console.log('Results:', planetData);
    }
    getPlanets()

这是 _render()

_render({ name, terrain, population }) {
    return `
<article class="media">
  <div class="media-left">
    <figure class="image is-64x64">
      <img src="${image}" alt="planet">
    </figure>
  </div>
  <div class="media-content">
    <div class="content">
    <h4>${name}</h4>
      <p>
        <span class="tag">${terrain}</span> <span class="tag">${population}</span>
        <br>
      </p>
    </div>
  </div>
</article>
    `;
  }

我需要做的是从获取的数据[=41=中获取这些参数的值 ].

Pastebin - https://pastebin.com/hbxfHC1U

Answer 1

根据您的 pastebin 代码段，我做了一些调整。

首先修改您的 _load 函数，使其 returns 来自 SWAPI 请求的结果。我已经删除了您在其中定义的函数，因为它看起来并不重要，而且您已经在 async 上下文中。

在您的 constructor 中使用 _load 的返回值并将其传递给 _create。（无论如何，您的评论表明这是您的意图）。在 _create 循环数据中，创建您的框并通过传递每个项目所需的属性来调用 _render 方法。

class Application {
  constructor() {
    this._startLoading()
    this._load()
      .then(data => this._create(data))
      .then(() => this._stopLoading())
  }

  async _load() {
    const urls = Array.from({
        length: 7
      },
      (v, i) => `https://swapi.boom.dev/api/planets?page=${i + 1}`);

    const promises = urls.map(url => fetch(url)
      .then(res => res.json())
      .then(data => data.results));

    const planetData = await Promise.all(promises)
    return planetData.flat();
  }
  
    //here should be moved the rendering of the boxes, I suppose by establishing a connection with _render()
  _create(data) {
    data.forEach(({ name, terrain, population }) => {
      const box = document.createElement("div");
      box.classList.add("box");
      
      box.innerHTML = this._render({
        name,
        terrain,
        population,
      });
      
      document.body.querySelector(".main").appendChild(box);
    })
  }

  _render({ name, terrain, population, image = '' }) {
    return `
<article class="media">
  <div class="media-left">
    <figure class="image is-64x64">
      <img src="${image}" alt="planet">
    </figure>
  </div>
  <div class="media-content">
    <div class="content">
    <h4>${name}</h4>
      <p>
        <span class="tag">${terrain}</span> <span class="tag">${population}</span>
        <br>
      </p>
    </div>
  </div>
</article>
    `;
  }

  // we can leave these two alone for now
  _startLoading() {
    console.log('loading');
  }

  _stopLoading() {
    console.log('finished');
  }

}

new Application();

<main class="main"></main>

如何在方法中使用获取的数据作为参数

How to use fetched data for argument in a method

javascript

methods

fetch