在 React 项目中，获取数据是非常关键的一部分，而 Axios 是一个优秀的开源的基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js。 Axios 支持从浏览器中的 XMLHttpRequest 和 Node.js 中的 http 客户端发出请求。本文将介绍如何在 React 项目中使用 Axios 进行数据请求。
安装和引入 Axios
在 React 项目中使用 Axios，需要先安装 Axios，可以使用 npm 命令进行安装：
--- ------- -----
然后，在需要使用 Axios 的组件中，需要引入 Axios：
------ ----- ---- --------
使用 Axios 获取数据
使用 Axios 获取数据，需要调用 axious.get() 方法，该方法接受一个 URL 参数，并返回一个 Promise 对象。在 Promise 的 resolve 方法中，可以获得返回的数据。
下面是一个示例代码，展示如何使用 Axios 获取数据：
------ ------ - --------- --------- - ---- --------
------ ----- ---- --------
-------- ----- -
----- ------ -------- - -------------
------------ -- -
-------------------------------------------------------
-------------- -- -----------------------
------------ -- --------------------
-- ----
------ -
-----
--------------
----
-------------- -- --- --------------------------------
-----
------
--
-
------ ------- ----在上面的实例中，通过调用 axios.get('https://jsonplaceholder.typicode.com/users') 获取了 https://jsonplaceholder.typicode.com/users 的数据，并在 then 方法中，将数据设置为 data 状态。在组件的 JSX 中，使用 data.map() 将每个用户的名称显示在列表中。
使用 Axios 发送数据
除了获取数据，Axios 还可以用于发送数据，通过调用 axios.post() 或其他 HTTP 方法，可以将数据发送到指定的 URL。
下面是一个发送数据的示例代码，展示如何使用 Axios 发送数据：
------ ------ - -------- - ---- --------
------ ----- ---- --------
-------- ----- -
----- ------- --------- - -------------
----- ------------ - ----- -- -
-----------------------
-------------------------------------------------------- - ----- --
-------------- -- ----------------------
------------ -- --------------------
-
------ -
-----
---------- - ---------
----- ------------------------
-------
------
------ ----------- ------------- --------------- -- ----------------------------- --
--------
------ ------------- -------------- --
-------
------
--
-
------ ------- ----在上面的示例代码中，当表单提交时，调用 axios.post() 方法将 title 数据发送到 https://jsonplaceholder.typicode.com/posts。在 then 方法中，我们可以看到返回的响应。
结论
在 React 项目中使用 Axios 进行数据请求非常容易，只需要安装并引入 Axios，并使用 axios.get()、axios.post() 等方法，即可完成数据的获取和发送，从而方便地操作数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6719e0139b4aadf9e00664a8