Next.js 是基于 React 的服务端渲染框架，在使用它构建应用时，我们经常需要调用后端数据接口。本文将介绍如何在 Next.js 中实现后端数据接口的调用，包括使用 Next.js 自带的 API 路由、使用第三方库 axios 调用接口以及实现带有缓存机制的接口请求。
使用 Next.js 自带的 API 路由
在 Next.js 中，我们可以使用自带的 API 路由来实现后端数据接口的调用。API 路由是一个页面，只不过它返回的是 JSON 数据，而不是 HTML。
首先，我们需要在 Next.js 项目根目录下创建一个叫做 pages/api 的文件夹。然后在这个文件夹下创建一个名为 [name].js 的文件，其中的 name 表示你想要访问的 API 的名称。
接下来，我们编写这个 API 的逻辑，例如这里我们编写一个 /api/hello 的 API，它返回一个包含当前时间的 JSON 数据：
export default (req, res) => {
res.statusCode = 200
res.json({ time: new Date().toISOString() })
}最后，在我们的页面中调用该 API。例如，在一个 React 组件中我们可以这样调用：
-- -------------------- ---- -------
------ - --------- --------- - ---- -------
-------- ------ -
----- ------ -------- - ------------
------------ -- -
-------------------
--------- -- -----------
---------- -- -------------------
-- ---
------ ------------ ---- --- ------------
-这样，我们就完成了使用 Next.js 自带的 API 路由调用后端数据接口的操作。
使用 axios 库调用后端数据接口
除了使用 Next.js 自带的 API 路由，我们也可以使用第三方库 axios 来调用后端数据接口。axios 是一个非常好用的 HTTP 请求库，在 Next.js 中也可以很好地使用它。
首先，我们需要安装 axios 库：
npm install axios
然后，我们可以这样编写 axios 调用后端数据接口的代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ - --------- --------- - ---- -------
-------- ------ -
----- ------ -------- - ------------
------------ -- -
----------------------
--------- -- -----------------------
-- ---
------ ------------ ---- --- ------------
-这样，我们就成功地使用 axios 调用了后端数据接口。
实现带有缓存机制的 API 请求
有时候，我们在调用后端数据接口的时候，可能希望使用缓存机制来避免重复请求，加快页面加载速度。我们可以使用 JavaScript 的 Map 对象来实现这个功能。
首先，我们创建一个箭头函数，代表我们的 API：
-- -------------------- ---- -------
----- ------ - ----- -- -- -
-- -------
-- ---------------------- -
----- ------------ - --------------------
-- --------
-- ----------- - ---------------------- - ------ -
------ -----------------
-
-
-- --------------------
----- --- - ----- ----------------------
----- ---- - --------
-- ----
-------------------- -
-----
---------- ----------
--
------ ----
-这个 API 会先检查是否有缓存结果，并且检查缓存是否过期。如果有缓存结果并且没有过期，就直接返回缓存数据。否则，它会发起一次新的请求，并且在使用新的数据更新缓存。
最后，在我们的页面中使用这个 API：
-- -------------------- ---- -------
------ - --------- --------- - ---- -------
-------- ------ -
----- ------ -------- - ------------
------------ -- -
-------------------
---------- -- -------------------
-- ---
------ ------------ ---- --- ------------
-这样，我们就成功地实现了带有缓存机制的 API 请求。
总结
本文介绍了三种实现后端数据接口调用的方式，分别是使用 Next.js 自带的 API 路由、使用 axios 库调用后端数据接口以及实现带有缓存机制的接口请求。这些方法都非常简单易懂，可以帮助你更好地在 Next.js 中使用后端数据接口，快速开发高质量的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ea4c548841e9894e5865b