在前端开发中，发送 HTTP 请求是必不可少的一个环节。而 axios 是一个常用的 HTTP 请求库，它可以在浏览器和 Node.js 中使用。本文将介绍如何在 React 中使用 axios 进行 HTTP 请求。
安装 axios
在使用 axios 之前，需要先安装它。可以使用 npm 或 yarn 进行安装：
npm install axios --save # 或者 yarn add axios
发送 GET 请求
在 React 中使用 axios 发送 GET 请求的方式如下：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ----- ---- --------
-------- ----- -
----- ------ -------- - -------------
------------ -- -
----------------------------------------------------------------------- -- -
-----------------------
---
-- ----
------ -
-----
----
---------------- -- -
--- -------------------------------
---
-----
------
--
-
------ ------- ----上面的代码中，我们使用了 useState 和 useEffect 两个 React Hook 来处理数据和副作用。在 useEffect 中，我们使用 axios 发送了一个 GET 请求，并将响应数据存储在 data 中。最后，我们将 data 显示在页面上。
发送 POST 请求
在 React 中使用 axios 发送 POST 请求的方式如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- --------
-------- ----- -
----- ------- --------- - -------------
----- ------ -------- - -------------
----- ------------ - ------- -- -
-----------------------
-----
--------------------------------------------------- -
------
-----
------- --
--
---------------- -- -
---------------------------
---
--
------ -
-----
----- ------------------------
-----
---------------------
------ ----------- ------------- ------------- -- ------------------------- --
------
-----
--------------------
--------- ------------ ------------- -- ------------------------ --
------
------- -----------------------------
-------
------
--
-
------ ------- ----上面的代码中，我们使用了 useState 来处理表单数据，并使用 axios.post 方法发送了一个 POST 请求。在这个例子中，我们向 https://jsonplaceholder.typicode.com/posts 发送了一个包含 title、body 和 userId 的 JSON 数据。
错误处理
在发送 HTTP 请求时，可能会出现错误。axios 提供了一些方法来处理错误，例如 catch 方法和 onError 回调函数。下面是一个使用 catch 方法处理错误的例子：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ----- ---- --------
-------- ----- -
----- ------ -------- - -------------
----- ------- --------- - -------------
------------ -- -
-----
--------------------------------------------------
---------------- -- -
-----------------------
--
-------------- -- -
------------------------
---
-- ----
------ -
-----
------ - ------------------ - -----
----
---------------- -- -
--- -------------------------------
---
-----
------
--
-
------ ------- ----上面的代码中，我们在 catch 方法中处理了错误，并使用 useState 来保存错误信息。如果出现错误，我们将错误信息显示在页面上。
总结
本文介绍了如何在 React 中使用 axios 进行 HTTP 请求。我们学习了如何发送 GET 和 POST 请求，并处理了可能出现的错误。axios 是一个强大的 HTTP 请求库，可以帮助我们更轻松地处理 HTTP 请求。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e3d22e1886fbafa4019859