介绍
Next.js 是一个用于构建 React 应用程序的基于 Node.js 的框架。它通过提供许多内置的功能和工具来简化 React 应用程序的开发，并且非常适合用于构建 SSR（Server Side Rendering）应用程序。在实现复杂的功能时，往往需要访问 API 接口来获取或者提交数据。那么，在 Next.js 中如何访问 API 接口呢？
使用示例
在 Next.js 中访问 API 接口，我们可以使用标准的浏览器内置 fetch API 或任何其他网络请求库，例如 axios。但是，在 Next.js 中使用 fetch 时，我们需要注意它的限制。
由于 Next.js 应用程序是基于 Node.js 构建的，因此在 Next.js 应用程序中使用 fetch 时，它不会被自动转换为 Node.js 可以执行的代码。因此，如果我们在 Next.js 应用程序中使用 fetch，必须在代码中包含 isomorphic-unfetch 库，并使用它来代替标准的 fetch 实现。
import fetch from 'isomorphic-unfetch'; const fetchPosts = async () => { const res = await fetch('https://jsonplaceholder.typicode.com/posts'); const posts = await res.json(); return posts; };
上面的代码，在 Next.js 应用程序中使用了 isomorphic-unfetch 库来访问一个基于 JSON 的博客数据。我们首先引入 isomorphic-unfetch 库，然后使用它发起一个 GET 请求，然后使用 await 关键字来等待服务器响应，并将响应解析为 JSON。
当然，我们需要将上述代码部署到 Next.js 应用程序中，并将其嵌入到我们的 React 组件中。
-- -------------------- ---- ------- ------ ------ - --------- --------- - ---- -------- ------ ----- ---- --------------------- ----- ----- - -- -- - ----- ------- --------- - ------------- ------------ -- - ----- --------- - ----- -- -- - ----- --- - ----- ---------------------------------------------------- ----- ----- - ----- ----------- ---------------- -- ------------ -- ---- ------ - ---- ----------------- -- - --- ------------------------------- --- ----- -- -- ------ ------- ------展开代码
上述代码展示了如何在 Next.js 中访问 API 接口，并使用 useEffect Hook 在组件中保持状态。我们在 useEffect Hook 中使用 isomorphic-unfetch 库来获取基于 JSON 的数据，然后使用 useState Hook 将其存储在组件的状态中。
在返回的 JSX 中，我们使用 map 方法将数据映射到 li 元素中，这将呈现博客帖子的标题。
总结
在 Next.js 中访问 API 接口是一个非常常见的场景，它是构建全功能应用程序的必要基础。通过使用 fetch API 或者 isomorphic-unfetch 库，我们可以轻松地访问 API 接口，并将其数据与我们的 React 组件集成在一起。
需要注意的是，在 Next.js 应用程序中使用 fetch 时，我们必须包含 isomorphic-unfetch 库，并使用它来代替标准的 fetch 实现。
参考源代码
完整的参考源代码可以在 GitHub 上获取。该项目演示了如何使用 isomorphic-unfetch 库来访问 API 接口，在 Next.js 中获取和显示数据。
-- -------------------- ---- ------- ------ ------ - --------- --------- - ---- -------- ------ ----- ---- --------------------- ----- ----- - -- -- - ----- ------- --------- - ------------- ------------ -- - ----- --------- - ----- -- -- - ----- --- - ----- ---------------------------------------------------- ----- ----- - ----- ----------- ---------------- -- ------------ -- ---- ------ - ---- ----------------- -- - --- ------------------------------- --- ----- -- -- ------ ------- ------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a41a5aadd4f0e0ffc4fbab
