Question

我有一项任务要做。我必须从Pokemon API获取数据，并在网站上显示它们。我需要显示口袋妖怪的名字，他的HP，攻击，防御价值和它演变的口袋妖怪。我在获取最后一个值时遇到问题。

我的代码现在：

$.ajax({

    url: 'http://pokeapi.co/api/v2/pokemon/25/'

}).done(function (response) {

    $('h1').append(response.name.charAt(0).toUpperCase() + response.name.slice(1)); // name
    $('li').first().append(response.stats[5].base_stat); // hp
    $('li').eq(1).append(response.stats[4].base_stat); // attack
    $('li').last().append(response.stats[3].base_stat); // defense
    console.log(response.types[0].type.url); // i console log link from witch i want to get value of evolves Pokemon
    //$('.evolution-chain').append(); place for the correct code

}).fail(function (error) {

    console.log(`error ${error.status}`);

});

这是一个链接，我可以从中获得＆＃34; Raichu＆＃34;名称。我怎么能这样做？

pokeapi.co/api/v2/type/13/ // second object in Pokemon Array.

我的想法（但我不确定这是不是一件好事）：

在顶部创建一个包含两个链接的数组，并使用ajax上的每个循环。
创建另一个ajax，尤其是最后一个值。

但我猜测有更好的解决方案。

Answer 1

实际上，您可以发出内部ajax请求以获取Pokemon类型名称：

$.ajax({
  url: 'https://pokeapi.co/api/v2/pokemon/25/'
}).done(function (response) {
  $('h1').append(response.name.charAt(0).toUpperCase() + response.name.slice(1)); // name
  $('li').first().append(response.stats[5].base_stat);
  $('li').eq(1).append(response.stats[4].base_stat);
  $('li').last().append(response.stats[3].base_stat);

  var typeUrl = response.types[0].type.url;
  $.ajax({
    url: typeUrl
  }).done(function (response) {
    var name = response.name;
    console.log(name);
    $('.evolution-chain').append(name);
  });
}).fail(function (error) {
  console.log(`error ${error.status}`);
});

但是，如果您可以使用ES2017 +功能并且正在寻找更优雅的解决方案，那么最好使用async / await：

async function getData() {
  let typeUrl = '';
  try {
    const response = await $.ajax({
      url: 'https://pokeapi.co/api/v2/pokemon/25/'
    });

    $('h1').append(response.name.charAt(0).toUpperCase() + response.name.slice(1)); // name
    $('li').first().append(response.stats[5].base_stat); // hp
    $('li').eq(1).append(response.stats[4].base_stat); // attack
    $('li').last().append(response.stats[3].base_stat); // defense

    typeUrl = response.types[0].type.url;
  } catch(error) {
    console.log(`error ${error}`);
  }

  try {
    const type = await $.ajax({
      url: typeUrl
    });

    const name = type.name;
    console.log(name);

    $('.evolution-chain').append(name);
  } catch(error) {
    console.log(`error ${error}`); 
  }
}

getData();

如何从API获取详细数据？

1 个答案: