Axios 是一个基于 Promise 的 HTTP 客户端，用于发出 Ajax 请求。React 作为前端框架，通常需要使用 Ajax 获取数据以便渲染页面。本篇文章将详细介绍如何在 React SPA 应用中使用 Axios 进行 Ajax 请求。
安装 Axios
可以使用 npm 安装 Axios：
npm install axios
在 React 应用中使用 Axios
首先，在需要用到 Axios 的组件中引入它：
import axios from 'axios';
接下来，我们可以在组件的生命周期方法中使用 Axios 来获取数据。
componentDidMount() 方法中获取数据
在组件挂载完成后，可以通过 Axios 发起 Ajax 请求，并将获取到的数据存储到组件的状态中，以便在渲染时使用。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
----- ---
---------- ------
------ ----
--
-
------------------- -
--------------- ---------- ---- ---
------------------------------------------------------- -- -
---------------
----- --------------
---------- -----
---
-------------- -- -
---------------
------
---------- -----
---
---
-
-------- -
----- - ----- ---------- ----- - - -----------
-- ------- -
------ ---------------------------
-
-- ----------- -
------ ----------------------
-
------ -
-----
-------------- -- -
---- -------------------------------
---
------
--
-
-
------ ------- ------------在 componentDidMount() 生命周期方法中，我们首先将 isLoading 设置为 true，表示数据正在加载中。接着使用 Axios 的 get 方法来获取数据，然后更新组件的状态。如果请求发生错误，我们将 error 存储在组件的状态中，以便在渲染时使用。最后，在 render 方法中根据组件的状态来渲染 UI。
在上面的例子中，“Loading...”是一个占位符，可以在数据加载时显示。在数据加载完成后，将渲染实际的数据。如果请求发生错误，则显示错误消息。
使用 async/await 获取数据
使用 async/await 语法可以让代码更加简洁清晰。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
----- ---
---------- ------
------ ----
--
-
----- ------------------- -
--- -
--------------- ---------- ---- ---
----- -------- - ----- ------------------------------------------
---------------
----- --------------
---------- -----
---
- ----- ------- -
---------------
------
---------- -----
---
-
-
-------- -
----- - ----- ---------- ----- - - -----------
-- ------- -
------ ---------------------------
-
-- ----------- -
------ ----------------------
-
------ -
-----
-------------- -- -
---- -------------------------------
---
------
--
-
-
------ ------- ------------在上面的例子中，我们使用 async/await 语法来获取数据。由于 async/await 在使用 Promise 时非常方便，这使得我们可以更加清晰的处理 Ajax 请求。
结论
在 React SPA 应用中使用 Axios 进行 Ajax 请求是一种很常见的数据获取方式。Axios 提供了一种方便的方法来获取和处理数据，并将其储存在组件的状态中，以便在渲染时使用。使用 async/await 语法可以使代码更加简洁，易于阅读和理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d96f8947dc5bcb3fed415