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

Question

我正在尝试制作一个应用程序，从SWAPI获得所有行星，然后将它们显示为页面上的框。我有_load()方法，用于获取数据，以及_render()方法，该方法应该呈现这些框。_render ()名称，地形，人口

参数。下面是我的部分代码:

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>
`;
}

我需要做的是获取值对于这些参数从获取的数据.

Pastebin——https://pastebin.com/hbxfHC1U

Answer 1

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

首先修改_load函数，使其返回来自SWAPI请求的结果。我已经删除了你在其中定义的函数，因为它似乎没有必要，而且你已经在async上下文中了。

在constructor中使用_load的返回值并将其传递给_create。(无论如何，你的评论表明这是你的意图)。在数据上的_create循环中，创建您的box并通过传递每个项目所需的属性来调用_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>