在 React 开发中，我们经常需要通过后端接口得到数据来展示应用程序的内容。为了达到这个目的，我们需要使用 JavaScript 库来发送 HTTP 请求并获取数据。本文将介绍如何在 React 中使用 axios 库来发送请求并获取数据。
安装 axios
在开始使用 axios 之前，我们需要先将其安装到我们的项目中。可以使用 npm 或 yarn 在项目中安装 axios。我们将使用 npm 进行安装。
npm install axios --save
发送 GET 请求
在 React 中，我们可以使用 axios 发送 GET 请求来获得数据。我们通常需要在组件的 componentDidMount() 方法中发送请求。以下是发送 GET 请求的代码示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- ----------- ------- --------- -
----- - -
----- --
-
------------------- -
-------------------------------------------------------
-------------- -- -
--------------- ----- ------------- ---
--
------------ -- -
-------------------
---
-
-------- -
----- - ---- - - -----------
------ -
-----
-------------- -- -
---- --------------
---------------------
------------------
------
---
------
--
-
-
------ ------- ------------在这个示例中，我们向 https://jsonplaceholder.typicode.com/posts 发送 GET 请求来获取帖子列表数据。一旦我们收到响应，我们将其保存在组件的状态中，并在渲染过程中遍历和呈现我们得到的数据。
发送 POST 请求
除了发送 GET 请求，我们还可以使用 axios 发送 POST 请求，从而向服务器发送数据并用于进行记录、注册或与其他用户交互。以下是发送 POST 请求的代码示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- ----------- ------- --------- -
----- - -
------ ---
----- --
-
---------------- - ------- -- -
-----------------------
----- - ------ ---- - - -----------
-------------------------------------------------------- -
------ ------
----- ----
--
-------------- -- -
----------------------
--
------------ -- -
-------------------
---
-
----------------- - ------- -- -
----- - ----- ----- - - -------------
---------------
------- -----
---
-
-------- -
----- - ------ ---- - - -----------
------ -
----- ---------------------------------
-----
------ ------------------------------
------ ----------- ---------- ------------ ------------- --------------------------------- --
------
-----
------ ----------------------------
--------- --------- ----------- ------------ ---------------------------------------------
------
-----
------- -----------------------------
------
-------
--
-
-
------ ------- ------------在这个示例中，我们向 https://jsonplaceholder.typicode.com/posts 发送 POST 请求以创建新帖子。我们通过表单输入中的数据在组件状态中设置了标题和正文，并在 handleSubmit() 方法中将其使用 axios 发送到后端。如果一切正常，我们将收到一个响应对象，并在控制台中记录响应数据。
结论
axios 提供了一种简单而有效的方法来发送 HTTP 请求并获取服务器数据。在 React 开发中使用 axios 不仅易于理解和使用，而且可以显著提高应用程序的性能和响应能力。无论是发送 GET 还是 POST 请求，我们都可以使用 axios 去发送请求并获取数据，轻松实现与后端的数据交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752c7e08bd460d3ad985906