从嵌套 api 链接获取数据

Question

我有一个在数组中提供其他 api 链接的 api，我可以从数组的第一级获取数据，但我也想从另一个数组内的 api 获取数据。例如，字符数组如何在 Api 中获取数据？

以下为详细页面。 API链接https://swapi.dev/api/films/1

<template>
  <div class="container mt-5 mb-5">
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-10">
          <div class="movie__content-wrap content">
            <template v-if="movie">
            <h1 class="movie__card-title card-title text-center">{{ movie.title }}</h1>
              <div class="meta mt-5 mb-5">
                <p class="mb-0"><strong>Episode: </strong>{{ movie.episode_id }}</p>
                <p class="mb-0"><strong>Release date:</strong>{{ movie.release_date }}</p>
                <p class="mb-0"><strong>Characters: </strong>{{ movie.characters }}</p>
              </div>
              <p class="mt-4 mb-5">{{ movie.opening_crawl }}</p>
            </template>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'MovieDetails',
  props: 
  {
    id: String,
  },
  data(){
    return {
      movie: null,
    }
  },
  mounted() {
    axios.get('https://swapi.dev/api/films/'+this.id)
      .then(response => {
        this.movie = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
};
</script>

Answer 1

要获取角色数据，您需要向角色 URL 发出额外的 API 请求并收集数据。具体方法如下：

首先，修改您的电影对象以包含角色数组 数据。将其初始化为空数组：

data() {
  return {
    movie: {
      charactersData: [],
    }
  }
},

在挂载的钩子中，获取电影数据后，您可以发出额外的请求来获取角色数据：

mounted() {
  axios.get('https://swapi.dev/api/films/' + this.id)
    .then(response => {
      this.movie = response.data;

      // Fetch character data for each character URL
      const characterPromises = this.movie.characters.map(characterUrl => axios.get(characterUrl));

      // Wait for all character data requests to complete
      Promise.all(characterPromises)
        .then(characterResponses => {
          this.movie.charactersData = characterResponses.map(response => response.data);
        })
        .catch(error => {
          console.error(error);
        });
    })
    .catch(error => {
      console.error(error);
    });
},

现在，您可以在模板中使用 movie.charactersData 来显示角色信息：

<p class="mb-0"><strong>Characters:</strong>
  <ul>
    <li v-for="character in movie.charactersData" :key="character.url">
      {{ character.name }}
    </li>
  </ul>
</p>

通过这些更改，您将获取

movie.characters

数组内每个字符 URL 的数据并将其存储在

movie.charactersData

中。然后，您可以迭代

movie.charactersData

以在模板中显示角色名称。