如何在 Next.js 应用中使用 Fetch API-JavaScript中文网-JavaScript教程资源分享门户

在现代前端开发中，我们经常会用到 Fetch API 来访问接口和处理数据。而在开发 React 应用时，我们可能会选择使用 Next.js 这种解决方案来加速开发和提升 SEO。那么，如何在 Next.js 应用中正确地使用 Fetch API 呢？接下来我们将详细讨论这个问题。

Next.js 和 Fetch API 的基本概念

Next.js 是一个 React 应用的解决方案，它提供了服务器端渲染、自动代码分割等特性，可以极大地提升 React 应用的性能和可维护性。而 Fetch API 则是浏览器内置的用于访问网络资源的接口，它提供了一个能够异步获取数据的标准方式。

在 Next.js 应用中使用 Fetch API，我们要注意以下几个关键点：

数据获取需要在组件渲染之前完成，可以使用 getInitialProps 生命周期钩子函数来完成数据获取。
数据获取需要比页面渲染更早完成，以便让 Next.js 在服务器端生成一份 HTML 输出，实现服务器端渲染。

使用 Fetch API 获取数据

首先，我们来看一下如何使用 Fetch API 来获取数据。以获取 GitHub API 中的用户信息为例，示例代码如下：

async function fetchGithubUser(username) {
  const response = await fetch(`https://api.github.com/users/${username}`)
  const data = await response.json()
  return data
}

这里我们定义了一个 fetchGithubUser 函数，它接收一个 username 参数用来指定需要获取的 GitHub 用户名称。我们使用 await 来等待 Fetch API 的响应结果，然后通过 response.json() 方法把结果转换成 JSON 格式的 JavaScript 对象。

接下来，我们在 Next.js 中定义一个组件来使用这个函数获取数据，并展示用户的头像和用户名。

// javascriptcn.com 代码示例
import React from 'react'

async function fetchGithubUser(username) {
  // fetchGithubUser 函数的代码
}

function GithubUser({ user }) {
  return (
    <>
      <h1>Github User: {user.login}</h1>
      <img src={user.avatar_url} />
    </>
  )
}

GithubUser.getInitialProps = async (ctx) => {
  const { query } = ctx
  const user = await fetchGithubUser(query.username)
  return { user }
}

export default GithubUser

这里我们定义了一个 GithubUser 组件，它接收一个 user 属性用来展示用户信息。在 getInitialProps 函数中，我们用 fetchGithubUser 函数来获取用户信息，并把结果作为 user 属性返回。这样，我们就可以在组件内部使用 user 属性展示用户信息了。

使用 isomorphic-unfetch 库简化代码

在上面的例子中，我们使用了标准的 Fetch API 来获取数据。不过，由于 Next.js 在服务器端的环境中没有内置 Fetch API，我们需要借助一些库来解决这个问题。这里我们推荐使用 isomorphic-unfetch 库，它提供了一个跨浏览器、跨平台的 Fetch API 实现，并可以在服务器端和客户端都使用。

这里是一个使用 isomorphic-unfetch 库的示例代码：

// javascriptcn.com 代码示例
import React from 'react'
import fetch from 'isomorphic-unfetch'

async function fetchGithubUser(username) {
  const response = await fetch(`https://api.github.com/users/${username}`)
  const data = await response.json()
  return data
}

function GithubUser({ user }) {
  // GithubUser 组件的代码
}

GithubUser.getInitialProps = async (ctx) => {
  const { query } = ctx
  const user = await fetchGithubUser(query.username)
  return { user }
}

export default GithubUser

这样，我们就可以在 Next.js 中方便地使用 Fetch API 来获取数据了。

总结

本文介绍了如何在 Next.js 应用中正确地使用 Fetch API 来获取数据，并通过实际代码实现了一个获取 GitHub 用户信息的示例。我们还介绍了 isomorphic-unfetch 库，它可以让我们在 Next.js 应用中更加方便地使用 Fetch API。希望这篇文章对你在开发 Next.js 应用中使用 Fetch API 有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6502858095b1f8cacdfcb01a