通过静态道具传递 API 调用详细信息答案

【问题标题】：Passing API call details by static props通过静态道具传递 API 调用详细信息
【发布时间】：2019-12-02 20:29:55
【问题描述】：

我正在构建一个需要多个不同 API 调用的小型 Vue.js 应用程序。我正在使用 tmdb api，我想在我的应用程序中包含热门、即将上映和评分最高的电影部分。所有这些都使用相同的调用，即（在这种情况下很流行）：

https://api.themoviedb.org/3/movie/popular?api_key=api_key&language=en-US&page=1

（流行可以替换为top_rated或即将到来）

我已经为上述调用创建了组件，并且在我的主页上我将静态道具传递给该组件以获取我想要的数据：

<Movies type="popular"/>
<Movies type="upcoming"/>
<Movies type="top_rated"/>

我接受道具，然后将其放入组件中的 fetch 链接中，如下所示：

https://api.themoviedb.org/3/movie/${this.type}?api_key=api_key&language=en-US&page=1

这是正确的方法，还是我应该将所有关于热门、即将到来和评分最高的呼吁放在 Promise.all 的主页上？我也只在主页上使用这些，在应用程序的其他地方都没有。

编辑：我认为在组件中这样做的主要好处是我只需要使用一个 for 循环而不是 3 个。仍然不确定这是否是正确的方法。

【问题讨论】：

当需要像data() { return { type : 'popular' } } <Movies :type="type" /> 这样的动态类型时，将类型作为prop 传递可能很有用，因此您只需要为当前的type 进行一次API 调用，而不是一直为所有3 次调用。

标签： vue.js

【解决方案1】：

我认为这是一个很好的方法。每个组件都在触发自己的请求，并在独立于组件的其他实例解决该请求时呈现（更新）。

使用Promise.all 没有意义 - 同时获取所有 3 个调用的数据是否重要？没有...

你做得对:)

【讨论】：