在 Web 开发中，与服务器进行数据交互是必不可少的。在这篇文章中，我们将分享 Next.js 如何使用 Fetch API 发送请求来与服务器进行数据交互。
Fetch API 简介
Fetch API 是现代浏览器用来与服务器进行网络请求的 API。它提供了一种比传统 XMLHttpRequest 更简单更直接的方式来发送和接收数据。Fetch API 返回 Promise，使得处理异步请求更加便捷。
在 Next.js 中使用 Fetch 发送请求
Next.js 提供了一个内置的 fetch 方法来发送客户端请求和服务端请求。这个 fetch 方法兼容原生的窗口全局对象的 fetch 方法，但在服务端使用时，需要使用 Node.js 的 http 模块发送请求。
下面是一个在 Next.js 中使用 fetch 发送 GET 请求的示例：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- -------------- -
----- ------ -------- - ---------------
----- --------- ----------- - ---------------
------------ -- -
----- -------- ----------- -
----- --- - ----- -------------------
----- ---- - ----- -----------
--------------
------------------
-
------------
-- ----
------ -
--
-------- - -
-----------------
- - -
--
---------------------
---------------------
---
--
---
--
-
------ ------- -------------在上面的示例中，我们发起一个 GET 请求到 /api/data，获取数据，然后展示在页面上。
当在服务端使用 fetch 时，我们可以通过传递 req 对象作为第二个参数来发起请求。下面是一个在服务端使用 fetch 发送 GET 请求的示例：
import fetch from "node-fetch";
export default async function handler(req, res) {
const data = await fetch(`${process.env.SOME_API_URL}/data`);
const json = await data.json();
res.status(200).json(json);
}如何处理错误
使用 fetch 发送请求时，我们需要确保对错误进行处理。下面是一个在 Next.js 中使用 fetch 发送请求，并处理错误的示例：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- -------------- -
----- ------ -------- - ---------------
----- --------- ----------- - ---------------
----- ------- --------- - ---------------
------------ -- -
----- -------- ----------- -
--- -
----- --- - ----- -------------------
-- --------- -
----- --- ------------- -- ----- -------
-
----- ---- - ----- -----------
--------------
------------------
- ----- ------- -
----------------
------------------
-
-
------------
-- ----
-- ------- -
------ --------- --------------------
-
------ -
--
-------- - -
-----------------
- - -
--
---------------------
---------------------
---
--
---
--
-
------ ------- -------------总结
在本文中，我们了解了 Next.js 如何使用 fetch 发送请求来与服务器进行数据交互。我们探索了如何在客户端和服务端使用 fetch，以及如何处理错误。
在使用 fetch 时，请确保处理错误并优雅地展示提示信息，这将有助于提高用户体验和应用程序的可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64538058968c7c53b07dcc3a