在现代 Web 开发中，前端应用程序经常需要与后端 API 交互。Next.js 是一个流行的 React 框架，它提供了许多有用的功能，包括在客户端和服务器端渲染 React 组件。在本文中，我们将介绍如何在 Next.js 应用程序中使用内置的 fetch API 或第三方库来请求 API。
内置 fetch API
在 Next.js 中，您可以使用内置的 fetch API 发送 HTTP 请求。这个 API 在客户端和服务器端都可用，因此您可以在同一代码库中使用相同的代码来请求 API。
要使用 fetch API，您需要使用以下代码：
const res = await fetch('https://example.com/api/data');
const data = await res.json();在这个例子中，我们使用 fetch API 发送 GET 请求到 https://example.com/api/data，并使用 res.json() 方法将响应转换为 JavaScript 对象。请注意，fetch API 返回一个 Promise，因此我们使用 await 关键字等待 Promise 解决。
使用第三方库
如果您需要更多的功能，例如取消请求、自动重试或请求拦截器，您可以使用第三方库。在 Next.js 中，您可以使用任何可用的 JavaScript 库，例如 axios 或 fetch-mock。
在这个例子中，我们将使用 axios 库来请求 API：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- ----------- -
--- -
----- -------- - ----- ------------------------------------------
----- ---- - --------------
------------------
- ----- ------- -
---------------------
-
-在这个例子中，我们使用 axios 库发送 GET 请求到 https://example.com/api/data，并使用 response.data 属性获取响应数据。请注意，我们使用 try-catch 语句来处理可能的错误。
在组件中使用 API
在 Next.js 中，您可以将 API 请求放在 React 组件中。这允许您将数据获取和呈现逻辑组合在一起，并根据需要在客户端和服务器端渲染组件。
在这个例子中，我们将创建一个简单的组件，它使用 axios 库请求 API 并呈现响应数据：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- --------- - ---- --------
-------- ------ -
----- ------ -------- - ---------------
------------ -- -
----- -------- ----------- -
--- -
----- -------- - ----- ------------------------------------------
----- ---- - --------------
--------------
- ----- ------- -
---------------------
-
-
------------
-- ----
-- ------- -
------ ----------------------
-
------ ------------------
-
------ ------- -----在这个例子中，我们使用 useState 和 useEffect 钩子来管理组件状态和 API 请求。在 useEffect 钩子中，我们使用 async/await 语法发送 GET 请求，并在响应返回时更新组件状态。在组件呈现时，我们使用条件渲染来显示“Loading...”文本或响应数据。
结论
在本文中，我们介绍了如何在 Next.js 应用程序中使用内置的 fetch API 或第三方库来请求 API。我们还演示了如何在组件中使用 API 请求。这些技术将使您能够轻松地与后端 API 交互，并在客户端和服务器端渲染 React 组件时保持一致。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672582452e7021665e18203f