为什么我的 API JSON 回复没有显示？

Question

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

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

      <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 文档中注意到这些差异 - 这非常有用。

为什么我的 API JSON 回复没有显示？

Why is my API JSON response not being displayed?

javascript

rest

fetch

themoviedb-api

vue.js