nextjs fetch
时间: 2023-05-25 16:02:18 浏览: 272
A:Next.js 是一个 React 框架,它可以轻松地创建服务器渲染 React 应用程序。使用 fetch 函数进行API调用是 Next.js 中常见的任务。以下是在 Next.js 中使用 fetch 函数获取异步数据的示例。
1. 首先导入 fetch 函数
```
import fetch from 'isomorphic-unfetch';
```
2. 使用 fetch 函数获取数据
```
const fetchData = async () => {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return data;
}
```
在这个例子中,fetch 函数用于从一个API中获取数据。 await 关键字用于等待 API 响应数据,并将其转换为 JSON 格式,然后返回数据。
3. 在 Next.js 页面中使用 fetch 函数
```
const MyPage = ({ data }) => {
return (
<div>
<h1>My data</h1>
{data && data.map(item => (
<div key={item.id}>
<p>{item.title}</p>
</div>
))}
</div>
)
}
MyPage.getInitialProps = async () => {
const data = await fetchData();
return { data };
}
export default MyPage;
```
在上面的代码示例中,使用 getInitialProps 函数将异步数据注入到页面组件中作为 props,然后在页面组件中渲染使用这些异步数据。该函数将在每次页面请求时被调用,并返回异步获取的数据作为 props,以便在页面渲染时使用。