接上节内容,此文章,会介绍获取数据以及API路由 参考官网:https://nextjs.org/learn/basics/getting-started git上面有大量TypeScript的例子，很多时间从推：https://github.com/zeit/next.js/tree/canary/examples 开发环境: window10 x64 node v10.16.3 npm v6.13.4 1.获取数据 在我们实际开发中，数据大多数来源自接口，我们将引入‘isomorphic-unfetch’这library，里面会提供一些方法以供我们获取数据，首先在命令行安装‘isomorphic-unfetch’，敲入： npm install isomorphic-unfetch 等它安装完，如图1: 图1.png 安装完之后，让我们来创建一个新页面，就叫'fetchData'吧！ 创建'pages/fetchData.tsx',然后敲入如下代码: //pages/fetchData.tsx import { NextPage,NextPageContext } from 'next'; import fetch from 'isomorphic-unfetch'; interface Show extends NextPageContext { id: number; name: string; } const FetchData: NextPage<{ shows: Array }> = (props) => (

Batman TV Shows

{props.shows.map(show => (
• id=>{show.id};
  name=>{show.name}
))}

); FetchData.getInitialProps = async (ctx: Show) => { const res = await fetch('https://api.tvmaze.com/search/shows?q=batman'); const data = await res.json(); console.log(`Show data fetched. Count: ${data.length}`); return { shows: data.map((entry: any) => entry.show) }; }; export default FetchData; 如图2： 如图2.png 其中https://api.tvmaze.com/search/shows?q=batman接口是官网提供的例子，找的关于蝙蝠侠的tv show。。 启动浏览器，url敲入http://localhost:3000/fetchData 可以看到效果，如图3： 如图3.png 2.API路由 我们能在此创建RESTful API，开发放给外面用，这个只是简单的接口例子，真正你的接口，你可能还需要日志，权限验证等等。 我们在'pages'下创建一个目录，叫'api'，然后在'api'创建一个文件，叫'randomQuote.ts',在文件里敲入如下代码： //pages/api/randomQuote.ts import { NextApiRequest, NextApiResponse } from 'next'; export default (req: NextApiRequest, res: NextApiResponse) => { res.status(200).json({ param:req.query.param, quote: 'Write tests, not too many, mostly integration', author: 'Kun' }); }; 如图4： 如图4.png 开启浏览器，我们可以看到一个application/json格式的一个api接口，如图5： 图5.png git地址:https://github.com/JaqenHo/next_js_learn.git

本文章由javascript技术分享原创和收集