Axios 是一个非常流行的 JavaScript 库，用于在浏览器和 Node.js 中发送 HTTP 请求。它提供了一种简单的方式来处理异步请求，并且可以与 React 无缝集成。在本文中，我们将介绍如何在 React 中使用 Axios 发送异步请求。
安装 Axios
首先，我们需要安装 Axios。可以使用 npm 或 yarn 来安装它。在命令行中输入以下命令：
npm install axios
或者
yarn add axios
发送 Get 请求
首先，让我们看一下如何使用 Axios 发送 GET 请求。在 React 组件中，我们可以使用 useEffect 钩子来发送异步请求。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ----- ---- --------
-------- ----- -
----- ------ -------- - ---------------
------------ -- -
----------------------------------------------------------------------- -- -
-----------------------
---
-- ----
-- ------- ------ ------------------
------ -
-----
---------------- -- -
---- --------------
---------------------
------------------
------
---
------
--
-
------ ------- ----在上面的代码中，我们首先导入了 useState 和 useEffect 钩子以及 Axios 库。然后，我们定义了一个名为 App 的组件，并在组件中使用 useState 钩子来定义一个名为 data 的状态。我们使用 useEffect 钩子来发送异步请求并将响应数据存储在 data 状态中。最后，我们在渲染组件时使用 map 函数来显示数据。
发送 Post 请求
现在，让我们看一下如何使用 Axios 发送 POST 请求。在 React 组件中，我们可以使用 useState 钩子来定义一个名为 formData 的状态，用于存储表单数据。然后，我们可以使用 Axios 的 post 方法来发送 POST 请求。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- --------
-------- ----- -
----- ---------- ------------ - ----------
----- ---
------ ---
-------- ---
---
----- ------------ - ------- -- -
-----------------------
-------------------------- ------------------------- -- -
----------------------
---
--
----- ------------ - ------- -- -
------------- ------------ -------------------- ------------------ ---
--
------ -
----- ------------------------
-------
-----
------ ----------- ----------- --------------------- ----------------------- --
--------
-------
------
------ ------------ ------------ ---------------------- ----------------------- --
--------
-------
--------
--------- -------------- ------------------------ ----------------------- --
--------
------- -----------------------------
-------
--
-
------ ------- ----在上面的代码中，我们首先定义了一个名为 formData 的状态，用于存储表单数据。然后，我们定义了 handleSubmit 函数，该函数在表单提交时调用。在 handleSubmit 函数中，我们使用 Axios 的 post 方法来发送 POST 请求，并将 formData 对象作为请求体发送。最后，我们定义了 handleChange 函数，该函数在表单输入时调用，并使用 setFormData 函数来更新 formData 状态。
结论
在本文中，我们介绍了如何在 React 中使用 Axios 发送异步请求。我们首先安装了 Axios，并演示了如何使用 useEffect 钩子发送 GET 请求。然后，我们演示了如何使用 useState 钩子和 Axios 的 post 方法发送 POST 请求。希望这篇文章能够帮助你更好地理解如何在 React 中使用 Axios 发送异步请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67697b3598e3e1ab1a91f139