Next.js 中如何访问 API 接口？

介绍

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 组件中。

import React, { useState, useEffect } from 'react';
import fetch from 'isomorphic-unfetch';

const Posts = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await res.json();
      setPosts(posts);
    };

    fetchData();
  }, []);

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default Posts;

上述代码展示了如何在 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 中获取和显示数据。

import React, { useState, useEffect } from 'react';
import fetch from 'isomorphic-unfetch';

const Posts = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await res.json();
      setPosts(posts);
    };

    fetchData();
  }, []);

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default Posts;

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a41a5aadd4f0e0ffc4fbab