简介
在开发一个 Next.js 应用时，通常需要与后端 API 进行交互，而 axios 是一个流行的 HTTP 请求库，它可以帮助我们发送请求并处理响应。本文将介绍如何在 Next.js 应用中使用 axios 发送 API 请求。
安装 axios
首先，我们需要安装 axios。可以使用 npm 或 yarn 进行安装：
--- ------- ----- - -- ---- --- -----
创建 API 请求
在 Next.js 应用中，我们通常会将 API 请求封装到一个单独的文件中，以便于管理和维护。可以在项目根目录下创建一个名为 api.js 的文件，并在其中定义一个 request 函数：
------ ----- ---- -------- ----- ------- - -------------- -------- ---------------------------- -------- ----- --- ------ ------- --------
在上面的代码中，我们使用 axios.create 创建了一个 axios 实例，并设置了 baseURL 和 timeout。baseURL 是 API 的基础 URL，可以在后续的请求中省略。timeout 是请求超时时间，如果请求超过了这个时间，就会被取消。
发送 GET 请求
现在我们已经定义了一个 axios 实例，可以使用它来发送 API 请求。下面是一个发送 GET 请求的示例：
------ ------- ---- -------- ------ ----- -------- ---------- - ----- -------- - ----- ---------------------- ------ -------------- -
在上面的代码中，我们定义了一个名为 getPosts 的函数，它使用 request 实例发送了一个 GET 请求，并返回响应数据。可以在其他组件中使用这个函数来获取文章列表：
------ - -------- - ---- ---------------
-------- ----------- ----- -- -
------ -
----
----------------- -- -
--- -------------------------------
---
-----
--
-
------ ----- -------- ---------------- -
----- ----- - ----- -----------
------ - ------ - ----- - --
-
------ ------- ----------在上面的代码中，我们使用 getStaticProps 函数来获取文章列表，并将其作为 props 传递给 PostsList 组件。在 PostsList 组件中，我们通过 posts.map 渲染了文章列表。
发送 POST 请求
除了 GET 请求，我们还可以使用 axios 发送其他类型的请求，比如 POST 请求。下面是一个发送 POST 请求的示例：
------ ------- ---- -------- ------ ----- -------- ---------------- - ----- -------- - ----- ---------------------- ------ ------ -------------- -
在上面的代码中，我们定义了一个名为 createPost 的函数，它使用 request 实例发送了一个 POST 请求，并将数据作为第二个参数传递给 post 方法。可以在其他组件中使用这个函数来创建新的文章：
------ - -------- - ---- --------
------ - ---------- - ---- ---------------
-------- ------------- -
----- ------- --------- - -------------
----- --------- ----------- - -------------
----- -------- ------------------- -
-----------------------
----- ---- - - ------ ------- --
----- -----------------
-------------
---------------
-
------ -
----- ------------------------
------
-----------
-------------
----------------- -- -----------------------------
--
---------
---------------
----------------- -- -------------------------------
--
------- -----------------------------
-------
--
-
------ ------- ------------在上面的代码中，我们使用 useState 钩子来管理表单数据，并在 handleSubmit 函数中调用 createPost 函数来创建新的文章。
总结
在本文中，我们介绍了如何在 Next.js 应用中使用 axios 发送 API 请求。首先，我们安装了 axios，并创建了一个 axios 实例。然后，我们使用这个实例发送了 GET 和 POST 请求，并在组件中使用这些函数来获取和创建文章。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d57740add4f0e0ffd2e588