为什么我的 API JSON 响应没有显示？

Question

我已经按照在线教程使用 Vue JS 和 fetch 创建了一个电影应用程序。 工作时的功能是我可以搜索电影，屏幕上会显示一些结果，包括海报、标题和年份。 在完成所有工作的教程后，我尝试更改我正在使用的 API（从 omdb 到 themoviedb）。 尝试连接新的 API 后，搜索返回空白。

我已经使用 chrome 上的网络工具来确定我收到了来自 API 的响应，但是在某个地方我出错了，因为没有显示任何内容。 注意：我知道海报不起作用（因为 themoviedb 将其作为不完整的路径返回）但为什么标题和年份不显示？ 我在下面添加了我的代码 - 请帮助我了解我所缺少的。

      <div class="movie" v-for="movie in movies" :key="movie.imdbID">
        <router-link :to="'/movie/' + movie.imdbID" class="movie-link">
          <div class="product-image">
            <img :src="movie.Poster" alt="Movie Poster" />
            <div class="type">{{ movie.Type }}</div>
          </div>
          <div class="detail">
            <p class="year">{{ movie.release_date }}</p>
            <p class="imdb">{{ movie.vote_average }} </p>
            <h3>{{ movie.original_title}}</h3> 

          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import env from '@/env.js'

export default {
  setup () {
    const search = ref("");
    const movies = ref([]);

    const SearchMovies = () => {
      if (search.value != "") {
      //fetch(`http://www.omdbapi.com/?apikey=${env.apikey}&s=${search.value}`)
       fetch(`https://api.themoviedb.org/3/search/movie?api_key=${env.apikey2}&language=en-US&query=${search.value}&page=1&include_adult=false`)

          .then(response => response.json())
          .then(data => {
            movies.value = data.Search;
            search.value = "";
          });
      }
    }

    return {
      search,
      movies,
      SearchMovies
    }
  }
}
</script>

Answer 1

不幸的是，对于如何创建面向外部的 API 没有真正的标准，记住每个 API 都决定提供特定的交互接口，以及结果数据的结构。 在您的情况下，响应的Search属性不再由新的 api 填充 - 它将数据发布到results属性。 调试是学习和跟踪代码中问题的好方法。

通常您可以在 API 文档中注意到这些差异 - 它非常有帮助。