获取蝙蝠侠节目

在我们的演示应用程序中，我们列出了主页上的博客文章。 现在我们要显示一个蝙蝠侠电视节目列表。

而不是硬编码这些节目，我们将从远程服务器获取它们。

这是我们使用TVMaze API来获取这些电视节目。 这是一个搜索电视节目信息的API。

首先我们需要安装同构 - 非提取。 这是我们要用来获取数据的库。 这是浏览器抓取API的简单实现，但在客户端和服务器环境中均可使用。

  1. npm install --save isomorphic-unfetch

然后用以下内容替换我们的 pages/index.js:

  1. import Layout from '../components/MyLayout.js'
  2. import Link from 'next/link'
  3. import fetch from 'isomorphic-unfetch'
  5. const Index = (props) => (
  6.   <Layout>
  7.     <h1>Batman TV Shows</h1>
  8.     <ul>
  9.       {props.shows.map(({show}) => (
  10.         <li key={show.id}>
  11.           <Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}>
  12.             <a>{show.name}</a>
  13.           </Link>
  14.         </li>
  15.       ))}
  16.     </ul>
  17.   </Layout>
  18. )
  20. Index.getInitialProps = async function() {
  21.   const res = await fetch('https://api.tvmaze.com/search/shows?q=batman')
  22.   const data = await res.json()
  24.   console.log(`Show data fetched. Count: ${data.length}`)
  26.   return {
  27.     shows: data
  28.   }
  29. }
  31. export default Index

除了Index.getInitialProps之外，上述页面上的所有内容都会很熟悉，如下所示：

  1. Index.getInitialProps = async function() {
  2.   const res = await fetch('https://api.tvmaze.com/search/shows?q=batman')
  3.   const data = await res.json()
  5.   console.log(`Show data fetched. Count: ${data.length}`)
  7.   return {
  8.     shows: data
  9.   }
  10. }

这是一个静态异步功能，您可以添加到应用程序的任何页面。 使用它，我们可以获取数据并将其作为道具发送到我们的页面。

正如你所看到的，现在我们正在获取蝙蝠侠电视节目，并将它们作为“shows” prop传入我们的页面。

获取蝙蝠侠节目 - 图1

您可以在上面的getInitialProps函数中看到，它会打印出提取到控制台的数据。

现在，看看浏览器控制台和服务器控制台。

然后重新加载页面。

您在哪里看到上述消息在页面重新加载后打印？

  1. ✓在服务器控制台
  2. ✦浏览器控制台
  3. ✦两个控制台
  4. ✦不要在任何控制台上打印