如何从VUE中的另一个API加载额外的JSON数据？

我正在使用vue/axios使用这个Pokeapi设置一个PokeDex项目。目前，我正在使用此JSON文件加载所有口袋妖怪名称：

我想加载来自另一个JSON文件的其他pokemon数据。例如：

除了当前设置之外，如何动态加载此数据

当前设置：

<template>

<div id="app">

    <div class="pokemon" v-for="pokemon in info">

        <span >{{ pokemon.entry_number }}</span>
        <span >{{ pokemon.pokemon_species.name }}</span>        

    </div>

</div>

</template>

<script>

export default {

name: '#app',

data () {
return {
    info: [],
    loading: true,
    errored: false,
}
},

methods: {

},

mounted () {

    axios.get('https://pokeapi.co/api/v2/pokedex/1/')

    .then(response => {
        this.info = response.data.pokemon_entries
    })

    .catch(error => {
        console.log(error)
        this.errored = true
    })

    .finally(() => this.loading = false)

}

};
</script>

{{pokemon.entry_number}
{{pokemon.pokemon_species.name}
导出默认值{
名称：“#应用程序”，
数据（）{
返回{
信息：[]，
加载：对，
错误：错误，
}
},
方法：{
},
挂载（）{
axios.get（）https://pokeapi.co/api/v2/pokedex/1/')
。然后（响应=>{
this.info=response.data.pokemon\u条目
})
.catch（错误=>{
console.log（错误）
this.errored=true
})
.最后（（）=>this.loading=false）
}
};

我花时间研究了您的API并实现了您希望的代码

当

info

数组中充满第一次API调用的数据时，我使用了一个观察者来调用第二个API（有关详细信息，请参阅：）。此外，我将调用分为不同的方法以改进代码：

 <template>
  <div id="app">
    <div class="pokemon" v-for="(pokemon, index) in info" :key="index">
      <span>{{ pokemon.entry_number }}</span>
      <span>{{ pokemon.pokemon_species.name }}</span>
      <span v-if="pokemon.details">-- details: base_experience{{ pokemon.details.base_experience }}</span>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "#app",

  data() {
    return {
      info: [],
      loading: true,
      errored: false
    };
  },
  watch: {
    info(newValue, oldValue) {
      if (oldValue.length === 0 && newValue.length > 0) {
        this.loadDetails();
      }
    }
  },
  methods: {
    getInitialData() {
      axios
        .get("https://pokeapi.co/api/v2/pokedex/1/")

        .then(response => {
          this.info = response.data.pokemon_entries;
        })

        .catch(error => {
          console.log(error);
          this.errored = true;
        })

        .finally(() => (this.loading = false));
    },

    loadDetails() {
      this.info.forEach((entry, index) => {
        const pokemonName = entry.pokemon_species.name;
        const secondApiUrl = `https://pokeapi.co/api/v2/pokemon/${pokemonName}/`;
        this.getDetailDataByPokemon(secondApiUrl, pokemonName);
      });
    },
    getDetailDataByPokemon(secondApiUrl, pokemonName) {
      axios.get(secondApiUrl).then(response => {
        this.mapDetailsToInfo(response, pokemonName);
      });
    },
    mapDetailsToInfo(response, pokemonName) {
      // here you can map the required infos to your initial info array.
      // as an example I mapped the base_experience
      const relevantDetail = response.data.base_experience;
      this.info = this.info.map(entry => {
        const mappedEntry = entry;
        if (entry.pokemon_species.name === pokemonName) {
          // here you can map any value
          mappedEntry.details = { base_experience: relevantDetail };
        }
        return mappedEntry;
      });
    }
  },

  mounted() {
    this.getInitialData();
  }
};
</script>

{{pokemon.entry_number}
{{pokemon.pokemon_species.name}
--详细信息：基本经验{{{pokemon.details.base_experience}
从“axios”导入axios；
导出默认值{
名称：“#应用程序”，
数据（）{
返回{
信息：[]，
加载：对，
错误：错误
};
},
观察：{
信息（新值、旧值）{
如果（oldValue.length==0&&newValue.length>0）{
这是loadDetails（）；
}
}
},
方法：{
getInitialData（）{
axios
.get（“https://pokeapi.co/api/v2/pokedex/1/")
。然后（响应=>{
this.info=response.data.pokemon_条目；
})
.catch（错误=>{
console.log（错误）；
this.errored=true；
})
.最后（（）=>（this.loading=false））；
},
加载详细信息（）{
this.info.forEach（（条目，索引）=>{
const pokemoname=entry.pokemon_species.name；
const secondapirl=`https://pokeapi.co/api/v2/pokemon/${pokemoname}/`；
this.getDetailDataByBookMon（secondApiUrl，pokemoname）；
});
},
GetDetailDataByBookMon（第二个API URL，口袋妖怪名称）{
get（secondapirl）.then（response=>{
mapDetailsToInfo（响应，口袋妖怪名称）；
});
},
mapDetailsToInfo（响应，口袋妖怪名称）{
//在这里，您可以将所需的信息映射到初始信息数组。
//作为一个例子，我映射了基本经验
const relevantDetail=response.data.base_经验；
this.info=this.info.map（条目=>{
const mappedEntry=入口；
if（entry.pokemon\u species.name==口袋妖怪名称）{
//在这里，您可以映射任何值
mappedEntry.details={base_experience:relevantDetail}；
}
返回地图中心；
});
}
},
安装的（）{
这是.getInitialData（）；
}
};

我花时间研究了您的API并实现了您希望的代码

当

info

数组中充满第一次API调用的数据时，我使用了一个观察者来调用第二个API（有关详细信息，请参阅：）。此外，我将调用分为不同的方法以改进代码：

 <template>
  <div id="app">
    <div class="pokemon" v-for="(pokemon, index) in info" :key="index">
      <span>{{ pokemon.entry_number }}</span>
      <span>{{ pokemon.pokemon_species.name }}</span>
      <span v-if="pokemon.details">-- details: base_experience{{ pokemon.details.base_experience }}</span>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "#app",

  data() {
    return {
      info: [],
      loading: true,
      errored: false
    };
  },
  watch: {
    info(newValue, oldValue) {
      if (oldValue.length === 0 && newValue.length > 0) {
        this.loadDetails();
      }
    }
  },
  methods: {
    getInitialData() {
      axios
        .get("https://pokeapi.co/api/v2/pokedex/1/")

        .then(response => {
          this.info = response.data.pokemon_entries;
        })

        .catch(error => {
          console.log(error);
          this.errored = true;
        })

        .finally(() => (this.loading = false));
    },

    loadDetails() {
      this.info.forEach((entry, index) => {
        const pokemonName = entry.pokemon_species.name;
        const secondApiUrl = `https://pokeapi.co/api/v2/pokemon/${pokemonName}/`;
        this.getDetailDataByPokemon(secondApiUrl, pokemonName);
      });
    },
    getDetailDataByPokemon(secondApiUrl, pokemonName) {
      axios.get(secondApiUrl).then(response => {
        this.mapDetailsToInfo(response, pokemonName);
      });
    },
    mapDetailsToInfo(response, pokemonName) {
      // here you can map the required infos to your initial info array.
      // as an example I mapped the base_experience
      const relevantDetail = response.data.base_experience;
      this.info = this.info.map(entry => {
        const mappedEntry = entry;
        if (entry.pokemon_species.name === pokemonName) {
          // here you can map any value
          mappedEntry.details = { base_experience: relevantDetail };
        }
        return mappedEntry;
      });
    }
  },

  mounted() {
    this.getInitialData();
  }
};
</script>

{{pokemon.entry_number}
{{pokemon.pokemon_species.name}
--详细信息：基本经验{{{pokemon.details.base_experience}
从“axios”导入axios；
导出默认值{
名称：“#应用程序”，
数据（）{
返回{
信息：[]，
加载：对，
错误：错误
};
},
观察：{
信息（新值、旧值）{
如果（oldValue.length==0&&newValue.length>0）{
这是loadDetails（）；
}
}
},
方法：{
getInitialData（）{
axios
.get（“https://pokeapi.co/api/v2/pokedex/1/")
。然后（响应=>{
this.info=response.data.pokemon_条目；
})
.catch（错误=>{
console.log（错误）；
this.errored=true；
})
.最后（（）=>（this.loading=false））；
},
加载详细信息（）{
this.info.forEach（（条目，索引）=>{
const pokemoname=entry.pokemon_species.name；
const secondapirl=`https://pokeapi.co/api/v2/pokemon/${pokemoname}/`；
this.getDetailDataByBookMon（secondApiUrl，pokemoname）；
});
},
GetDetailDataByBookMon（第二个API URL，口袋妖怪名称）{
get（secondapirl）.then（response=>{
mapDetailsToInfo（响应，口袋妖怪名称）；
});
},
mapDetailsToInfo（响应，口袋妖怪名称）{
//在这里，您可以将所需的信息映射到初始信息数组。
//作为一个例子，我映射了基本经验
const relevantDetail=response.data.base_经验；
this.info=this.info.map（条目=>{
const mappedEntry=入口；
if（entry.pokemon\u species.name==口袋妖怪名称）{
//在这里，您可以映射任何值
mappedEntry.details={base_experience:relevantDetail}；
}
返回地图中心；
});
}
},
安装的（）{
这是.getInitialData（）；
}
};

是否存在第二个API url静态，或者url是否取决于第一次调用的结果，根据第一次调用：第一个API:Second API+“口袋妖怪的名字/”所以我猜“口袋妖怪的名字”应该由第一次调用的结果填充。当你可以在第一个API的“then”中简单调用它时，或者第一个API是否返回一个列表，你需要检索所有条目的详细信息？是的，@SimonThiel，我需要检索所有条目的其他详细信息。第一个API只返回名称+url。是否有第二个API url是静态的，或者url是否取决于第一个调用的结果？Hi@SimonThiel，取决于第一个调用：第一个API:second API+“pokemon的名称/”因此I g