在 React.js 的开发中，我们可能需要从后端服务器中获取数据来渲染视图。为了实现这一过程并处理相关的网络请求，我们可以使用 axios 库。本文针对初学者阐述 React.js 应用中如何使用 axios 库进行数据请求，并给出详细的指导与示例代码。
安装和导入 axios
要想使用 axios，首先需要在项目中安装 axios 库，可以使用 npm 命令完成安装：
--- ------- -----
安装完成后，我们可以通过一下语句将 axios 导入到项目文件中：
------ ----- ---- --------
现在，我们已经准备好在我们的 React.js 应用程序中使用 axios 了。
发送 GET 请求
要发起一个 GET 请求，axios 提供了 get() 方法，它接受一个 URL 参数和一些可选的配置。在 React.js 中，我们通常把网络请求放在组件的生命周期函数中，例如，在 componentDidMount() 函数中：
------ ----- ---- --------
------ ----- ---- --------
----- --- ------- --------------- -
----- - -
----- --
-
------------------- -
----------------------------------------
-------------- -- -
--------------- ----- ------------- ---
--
------------ -- -
-------------------
---
-
-------- -
------ -
-----
--------------------------- ------ -- -
-- ----------------------
---
------
--
-
-
------ ------- ----上述代码中，我们在组件加载时使用 axios 发送了一个 GET 请求，并在请求成功后通过 setState() 更新了组件的状态。在 render() 函数中将获取到的数据渲染到组件。
发送 POST 请求
要发起一个 POST 请求，我们要用到 axios 的 post() 方法。在 React.js 中发送 POST 请求的方式与发送 GET 请求的方式基本相同。例如，向后端服务器增加一条新内容的请求，我们可以这样：
----------------------------------------- -
----- ---- -----
--
-------------- -- -
----------------------
--
------------ -- -
-------------------
---发送 PUT 和 DELETE 请求
要发送 PUT 和 DELETE 请求，我们可以依次使用 put() 和 delete() 方法。这两个方法也非常简单，示例如下：
-- --- -------
------------------------------------------ -
----- -------- -----
--
-------------- -- -
----------------------
--
------------ -- -
-------------------
---
-- ------ -------
---------------------------------------------
-------------- -- -
----------------------
--
------------ -- -
-------------------
---配置 axios
axios 允许我们进行一些常用的配置，例如设置请求超时时间、设置请求头等等。下面是一个 axios 配置的示例：
---------------------- - -------------------------- ---------------------- - ----- ---------------------------------------------- - -----------
以上代码中，我们已经设置了本次请求的 baseURL 和超时时间，并在请求头中添加了一个 Authorization 域，这个域用于传递服务端校验需要的令牌。
结论
在本文中，我们已经探讨了在 React.js 应用中如何使用 axios 库进行数据请求，并且介绍了如何发送 GET、POST、PUT 和 DELETE 请求，并配置 axios。通过这些介绍，我们将能够快速实现前端和后端的数据交互，更好地完成我们的 React.js 开发工作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fd3d2144713626017b2f47