这些天我没有太多的空闲时间，自从开始参加Fullstack Academy的Grace Hopper程序以来，我每天都沉浸在代码中呢（但这又是一天的故事，另一篇博客文章）。 当我确实有更多的休闲机会时，Twitch肯定偷走了很多时间。 最初，我只是用它来替代我微薄的预算之外的游戏，但是很快我通过该平台发现的社区变成了一个虚拟的家。 由于我最近没有太多机会真正观看Twitch（不是因为缺乏尝试），为什么不花时间在全新的Twitch API上花费一些高质量的教育时间来弥补？
Twitch API于2017年10月启动，为开发人员和流媒体提供了使用其服务器中的数据来查找其游戏的信息，其中包括流，游戏，视频，用户等的信息。 在本教程中，我将利用流数据并稍后检查元数据的一个特别有趣的功能。 Twitch元数据是用户提供的内容，特定于具有流行游戏《守望先锋》或《炉石传说》的流。 虽然我还没有体验过后者，但我还是打了一两回合，试图让我的团队在《守望先锋》中保持活力，这就是我们将在本演示中使用的主题。 我的意思是，对可能会要求康复的Genjis进行数字计算会不会很酷？ 但首先，让我们看一下一般的流请求。
有许多选项可用于自定义我们的查询，但出于本项目的目的，我将主要使其保持简单。 以下是类似内容的预览，如果您关注我们将会做的事情：
以简单为主题运行，我们将制作一个单页面应用程序，不需要服务器，所有请求都在前端。 为此，我们将使用Vue.js，这是一个相对较新的工具，我发现它易于使用的Javascript框架。
首先，我们只需要两个文件： index.html和app.js ，我们所有的Vue Javascript和对API的调用都将在其中。 您可能还希望实现一个简单的CSS文件（例如mine），以对页面进行排序。
此时，您还应该访问Twitch开发人员门户，您可以在其中注册API客户端ID，您需要访问该API客户端ID。
在index.html中 ，我们将从一个简单的基础开始，如下所示：
为了使用它，在我们的方法中，我们将数据设置为应用程序中的数据对象。 不要忘记为任何Axios请求添加错误处理！
现在，我们将在应用程序中添加另一个部分，该部分将挂载您的请求方法，以在应用程序加载时运行。 我们正在提取数据，但没有采取任何步骤将其呈现到页面。 为了解决这个问题，我们将处理第一个Vue组件。
Vue组件具有名称和将从应用程序数据中提取的所有道具。 然后，您在组件中创建一个模板，该模板设置HTML的显示位置。 在Vue中，要访问数组中的值，可以使用v-for循环。 现在，我们可以访问正在查看的流的每个属性。 标题，查看者和信息流的当前缩略图是我决定添加到我的内容中的。 如提供的那样，缩略图URL使图像的尺寸保持打开状态，因此我使用了一些字符串操作将其设置为250 x 150像素。
