我如何迭代通过pokeAPI来获得所有后续的精灵宝可梦数据？

Question

嗨，我正在使用Vuejs来获取一些精灵宝可梦的数据。所以我想出了如何检索所有的精灵宝可梦名称和它们的api urls来获得更多关于它们的信息。问题是我不知道如何获取这些URL并访问每个精灵宝可梦的特定数据。我试图递增一个变量，并将其连接到URL以获取他们的数据，但这不起作用。我还尝试访问api调用中的数据，但同样不起作用。

<template>
  <div>
    <h2>{{subtitle}}</h2>
    <div v-for="pokemon in basicInfo" v-bind:key="pokemon.name">
  <span>{{ pokemon.name}}</span>
</div>
<!-- Nothing is produced, and I dont get I an error -->
<div v-for="pokemon2 in advInfo" v-bind:key="pokemon2.index">
  <span>{{pokemon2}}</span>
</div>

<script>
import axios from "axios";

export default {
  data() {
    return {
      subtitle: "First 150 pokemon",
      basicInfo: [],
      advInfo:[],
      i:0
    };
  },
  methods: {
    // trying to increment i 
  getNext: function(){
    this.i=i++;
  }
  },
  mounted() {
    axios
  // this gets a list of the first 20 pokemon. I can get the pokemon's name and their url
  .get("https://pokeapi.co/api/v2/pokemon/")

  .then(response => {
    this.basicInfo = response.data.results;
  });

      // here I'm trying to access more specific data on each pokemon by concatenating a number to the url 
    axios
      .get("https://pokeapi.co/api/v2/pokemon/5")

      .then(response => {
        this.advInfo= response.data.results;

      });

  }
};
</script>

<style scoped>

</style>

Answer 1

它看起来像是".../api/v2/pokemon/“生成一个带有结果数组的对象，并且这些结果包含像”.../api/v2/pokemon/(一些id)“这样的uri。

将它们组合的方法如下：

axios.get("https://pokeapi.co/api/v2/pokemon/").then(response => {
  this.basicInfo = response
  let promises = this.basicInfo.map(result => {
    return axios.get(result.url)
  })
  Promise.all(promises).then(response => {
    this.advInfo = response
  })
});

现在advInfo将是一个数组，正如您所期望的那样，因此您可以使用v-for...

<div v-for="(pokemon2, i) in advInfo" :key="i">
  <pre>{{pokemon2}}</pre>
</div>