gpt4 book ai didi

javascript - Nextjs 重新加载页面时获取数据

转载 作者:可可西里 更新时间:2023-11-01 13:18:32 25 4
gpt4 key购买 nike

在 React 中,我们在重新加载页面时使用 useEffect 获取数据:

useEffect(() => {
let ignore = false
const fetchingData = async () => {
const res = await fetch(<your_path>)
const data = await res.json()
if (!ignore) setData(data)
};
fetchingData()
return () => { ignore = true }
}, [])

但是我如何在 Next.js 中执行此操作?当页面重新加载时,Fetch 不会在 getInitialProps 中触发。

最佳答案

使用 axios 或 isomorphic-unfetch。它们在客户端和服务器环境中都可以工作。 Node.js 环境中不存在 Fetch API。它。如果您仍想在客户端代码中使用 Fetch API,则应使用同构取消获取。当您在浏览器中时,它会使用 unfetch polyfill。如果您的代码在 Node.js 中运行,它会切换到 node-fetch。

import "axios" from "axios"

static async getInitialProps(){
const res=await axios.get('url')//
const data=res.data
return {data}
}

更新

除了客户端的 fetch() 之外,Next.js 还在 Node.js 环境中填充了 fetch() 。您可以在服务器代码(例如 getStaticProps/getServerSideProps)中使用 fetch(),而无需使用 isomorphic-unfetch 或 node-fetch 等 polyfill。

https://nextjs.org/docs/basic-features/supported-browsers-features

关于javascript - Nextjs 重新加载页面时获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58367121/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com