如何从另一个API调用插入数据到函数中

Question

我正在建立一个项目网站，使用rawg api来获取有关游戏的数据并在屏幕上显示它们。我还实现了一个搜索功能。我的函数getGame使用的是名为API_URL的基础url。我的问题是，这个链接返回的数据不返回描述作为它的变量之一。它有游戏id和游戏名称等其他内容，但没有描述。我已经检查了文档，它说，为了获得游戏的细节，我需要使用不同的获取链接，在id作为参数。所以我实现了另一个名为getDescription()的函数，它从游戏中获取id。为每一个函数。我能够控制台记录所有正在显示的游戏描述。我的问题是我如何能够将描述插入到我的showGames函数内的dom。我的代码附在下面。谢谢。

const API_URL = `https://api.rawg.io/api/games?key=${apiKey}&page=5&page_size=40`;
const SEARCH_API = `https://api.rawg.io/api/games?key=${apiKey}&search="`;
const form = document.getElementById('form');
const search = document.getElementById('search-game');
const main = document.getElementById('main');
getGames(API_URL)
async function getGames(url){
const request = await fetch(url)
const response = await request.json()
showGames(response.results)
}
async function getDescription(id){
const request = await fetch(`https://api.rawg.io/api/games/${id}?key=${apiKey}`)
const response = await request.json();
showDescription(response.description)
}
function showGames(games){
main.innerHTML = '';
games.forEach(game => {
const { background_image, name, released, rating_top, id } = game;
const gameEl = document.createElement('div');
const platform = game.parent_platforms.map(platform => platform.platform.name).join(', ');
getDescription(id)
gameEl.classList.add('card');
gameEl.innerHTML = `
<div class="card-top">
<img src="${background_image}" alt="" class="card-image">
</div>
<div class="card-bottom">
<div class="card-info">
<h1 class="game-name">${name}</h1>
<h3>Release date: ${released}</h3>
<p>Platforms: <span>${platform}</span></p>
<p>*****I WANT TO ENTER THE DESCRIPTION HERE*****</p>
</div>
<div class="card-rating">
<span class="${getColorByRating(rating_top)}">${rating_top}</span>
</div>
</div>
`;
main.appendChild(gameEl);
})
}

编辑这是我在getDescription函数中响应的控制台日志控制台日志

我能够通过在我的forEach之后添加async得到我想要的输出，就像这个游戏一样。异步游戏=>{…})这是我的工作代码

const API_URL = `https://api.rawg.io/api/games?key=${apiKey}&page=5&page_size=40`;
const SEARCH_API = `https://api.rawg.io/api/games?key=${apiKey}&search="`;
const form = document.getElementById('form');
const search = document.getElementById('search-game');
const main = document.getElementById('main');
getGames(API_URL)
async function getGames(url){
const request = await fetch(url)
const response = await request.json()
showGames(response.results)
}
async function getDescription(id){
const request = await fetch(`https://api.rawg.io/api/games/${id}?key=${apiKey}`)
const response = await request.json();
return response;
}
function showGames(games){
main.innerHTML = '';
games.forEach(async game => {
const { background_image, name, released, rating_top, id } = game;
const gameEl = document.createElement('div');
const platform = game.parent_platforms.map(platform => platform.platform.name).join(', ');
const response = await getDescription(id)
gameEl.classList.add('card');
gameEl.innerHTML = `
<div class="card-top">
<img src="${background_image}" alt="" class="card-image">
</div>
<div class="card-bottom">
<div class="card-info">
<h1 class="game-name">${name}</h1>
<h3>Release date: ${released}</h3>
<p>Platforms: <span>${platform}</span></p>
<p>${response.description}</p>
</div>
<div class="card-rating">
<span class="${getColorByRating(rating_top)}">${rating_top}</span>
</div>
</div>
`;
main.appendChild(gameEl);
})
}

Answer 1

正如您所说，getDescription函数只返回string，所以您可以这样做

async function getDescription(id){
const request = await fetch(`https://api.rawg.io/api/games/${id}?key=${apiKey}`)
const response = await request.json();
//showDescription(response.description)
//instead of using a function, just return the response from this func
return response
}
function showGames(games){
main.innerHTML = '';
games.forEach(game => {
const { background_image, name, released, rating_top, id } = game;
const gameEl = document.createElement('div');
const platform = game.parent_platforms.map(platform => platform.platform.name).join(', ');
//save response into a variable
const response = getDescription(id)
gameEl.classList.add('card');
gameEl.innerHTML = `
<div class="card-top">
<img src="${background_image}" alt="" class="card-image">
</div>
<div class="card-bottom">
<div class="card-info">
<h1 class="game-name">${name}</h1>
<h3>Release date: ${released}</h3>
<p>Platforms: <span>${platform}</span></p>
<p>${response.description}</p>
</div>
<div class="card-rating">
<span class="${getColorByRating(rating_top)}">${rating_top}</span>
</div>
</div>
`;
main.appendChild(gameEl);
})
}

然后在html字符串文字

中使用变量response.description

Answer 2

您应该能够将showDescription的响应保存在一个变量中，然后将其包含在您的内部Html中。

它与此斗争的事实是if数组。forEach有一个回调，返回一个承诺(像async的showDescription())， javascript引擎不会等待它被解析或拒绝，所以控制台将显示一个错误，描述为空。

有一个很好的问题你可以在这里找到如何循环承诺

你必须像这样更新getDescription:

async function getDescription(id){
const request = await fetch(`https://api.rawg.io/api/games/${id}?key=${apiKey}`)
const response = await request.json();
return response.description;
}

编辑showGames

async function showGames(games) {
...

并用于showGames

内部

for (const game of games) {
const description = await getDescription(game.id)
...
}

每个循环将等待getDescription()在开始下一个循环之前完成