Javascript 如何组合两个获取请求以获取所需的信息？

我正在写一个关于电影的网站。我需要弄到我的风格。但问题是这个。在请求中，所有主要信息都位于其中，类型由id表示。我需要在有这些id和类型名称的位置发出另一个请求。在Vue组件中，我创建了一个for循环。有了它，我展示了除了类型之外的基本信息。如何组合这两个查询

我的代码：

movies.js

export default {
  actions: {
    async getPopularFilms({ commit }) {
      const res_movies = await fetch(
        'https://api.themoviedb.org/3/movie/popular?api_key=d502a3d84eb533756ec099ef127a2acd&language=en-US&page=1'
      );
      const { results } = await res_movies.json();
      commit('updateFilms', results);

      // Fetch genres
      const res_genres = await fetch(
        'https://api.themoviedb.org/3/genre/movie/list?api_key=d502a3d84eb533756ec099ef127a2acd&language=en-US'
      );
      const { genres } = await res_genres.json();

      let ids = [];
      let genres_ids = [];
      for (let id = 0; id < results.length; id++) {
        ids.push(results[id].genre_ids);
      }
      for (let id = 0; id < genres.length; id++) {
        genres_ids.push(genres[id]);
      }
      console.log(ids);
      console.log(genres_ids);
    },
  },
  mutations: {
    updateFilms(state, films) {
      state.popular = films;
    },
    updateGenres(state, genres) {
      state.genres = genres;
    },
  },
  state: {
    popular: [],
    genres: [],
  },
  getters: {
    returnFilms(state) {
      return state.popular;
    },
    returnGenres(state) {
      return state.genres;
    },
  },
};

导出默认值{
行动：{
异步getPopularFilms（{commit}）{
const res_movies=等待获取(
'https://api.themoviedb.org/3/movie/popular?api_key=d502a3d84eb533756ec099ef127a2acd&language=en-美国&page=1'
);
const{results}=wait res_movies.json（）；
提交（'updateFilms'，结果）；
//获取流派
const res_genres=等待获取(
'https://api.themoviedb.org/3/genre/movie/list?api_key=d502a3d84eb533756ec099ef127a2acd&language=en-美国的
);
const{genres}=await res_genres.json（）；
设ids=[]；
让类型_id=[]；
for（设id=0；id

大众视觉

<template>
  <div class="container mx-auto px-4 pt-8">
    <div class="popular-movies">
      <h2
        class="uppercase tracking-wider text-lg text-orange-500 font-semibold"
      >
        Popular movies
      </h2>
      <div
        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"
      >
        <div v-for="movies in returnFilms" :key="movies.id" class="mt-8">
          <img
            :src="'https://image.tmdb.org/t/p/w200' + movies.poster_path"
            alt="poster"
            class="hover:opacity-75 transition ease-in-out duration-150"
          />
          <div class="mt-2">
            <p class="text-lg mt-2 hover:text-gray-300">{{ movies.title }}</p>
            <div class="flex items-center mt1 text-sm text-gray-400">
              <svg class="fill-current text-orange-500 w-4" viewBox="0 0 24 24">
                <g data-name="Layer 2">
                  <path
                    d="M17.56 21a1 1 0 01-.46-.11L12 18.22l-5.1 2.67a1 1 0 01-1.45-1.06l1-5.63-4.12-4a1 1 0 01-.25-1 1 1 0 01.81-.68l5.7-.83 2.51-5.13a1 1 0 011.8 0l2.54 5.12 5.7.83a1 1 0 01.81.68 1 1 0 01-.25 1l-4.12 4 1 5.63a1 1 0 01-.4 1 1 1 0 01-.62.18z"
                    data-name="star"
                  ></path>
                </g>
              </svg>
              <span class="ml-1">{{ movies.vote_average * 10 }}%</span>
              <span class="mx-2">|</span>
              <span>{{ movies.release_date }}</span>
            </div>
            <div class="text-gray-300 text-sm">aaa</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'Popular Movies',
  computed: {
    ...mapGetters(['returnFilms']),
  },
  methods: {
    ...mapActions(['getPopularFilms']),
  },
  async mounted() {
    this.getPopularFilms();
  },
};
</script>

<style lang="scss">
.text-orange-500 {
  color: #ed8936;
}
</style>

流行电影
{{movies.title}
{{movies.vote_average*10}}}%
|
{{movies.release_date}
aaa
从“vuex”导入{MapGetter，mapActions}；
导出默认值{
名称:"热门电影",，
计算：{
…映射器（['returnFilms']），
},
方法：{
…映射操作（['getPopularFilms']），
},
异步装入（）{
这是.getPopularFilms（）；
},
};
.text-orange-500{
颜色：#ed8936；
}

截图

我的请求：

---

假设您希望genreid在结果中转换为其名称

试试这个。不幸的是，我无法测试它。我在手机上

async getPopularFilms({ commit }) {
      const res_movies = await fetch(
        'https://api.themoviedb.org/3/movie/popular?api_key=d502a3d84eb533756ec099ef127a2acd&language=en-US&page=1'
      );
      const { results } = await res_movies.json();
      commit('updateFilms', results);

      // Fetch genres
      const res_genres = await fetch(
        'https://api.themoviedb.org/3/genre/movie/list?api_key=d502a3d84eb533756ec099ef127a2acd&language=en-US'
      );
      const { genres } = await res_genres.json();

      const filmsWithGenres = results.map( ({genre_ids, ...rest}) => ({...rest, genre_ids: genre_ids.map(id => genres.find(genre => genre.id === id).name )}) )

      console.log(filmsWithGenres);
    },

---

解释所以，我在这里用了三件事。箭头函数

（）=>（{}）

，

Array.map（）

和

Array.find（）

。在数组中的每个项上循环映射，并返回一个包含每个返回项的数组。map函数中的arrow函数，接收到在其（first）（）内循环的项。箭头（=>）后面的部分是（新）数组的返回值。这是一个名称，可以在带有array.find（）的genres数组中找到。find执行类似于map的操作，它循环遍历数组中的每个值，直到找到与条件（也称为测试）匹配的项（在数组中）。Find返回匹配的项，该项是包含流派id和名称的对象。因此，您可以使用“find”函数获取名称。Vscode自动从“core.js”导入“find”。我被解雇了。代码被启动了