Next.js与TypeScript从零起步学习笔记-4.获取数据以及API路由

接上节内容,此文章,会介绍获取数据以及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<Show> }> = (props) => (
    <div>
        <h1>Batman TV Shows</h1>
        <ul>
            {props.shows.map(show => (
                <li key={show.id}>
                    id=>{show.id};
                    <br/>
                    name=>{show.name}
                </li>
            ))}
        </ul>
    </div>
);

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

最后编辑于：2020.01.16 00:37:46