在开发 web 应用时,通常会涉及到与后端 API 进行数据交互。Create React App 提供了一种简单的方式来集成后端 API,并将数据展示在前端界面上。
使用 Axios 发起 HTTP 请求
Axios 是一个流行的 JavaScript 库,用于在浏览器和 Node.js 中发起 HTTP 请求。我们可以使用 Axios 来与后端 API 进行通信。
首先,我们需要安装 Axios:
npm install axios
然后,在 React 组件中使用 Axios 发起 GET 请求:
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
------ ----- ---- --------
----- ----------- - -- -- -
----- ------ -------- - ---------------
------------ -- -
----- --------- - ----- -- -- -
----- -------- - ----- ------------------------------------------
-----------------------
--
------------
-- ----
------ -
-----
----- - -
----
-------------- -- -
--- ------------------------------
---
-----
- - -
-----------------
--
------
--
--
------ ------- ------------在上面的示例中,我们使用 Axios 发起了一个 GET 请求,并将返回的数据展示在页面上。
使用 Fetch API 发起 HTTP 请求
除了 Axios,我们还可以使用浏览器原生的 Fetch API 来发起 HTTP 请求。Fetch API 提供了一种现代的方式来处理网络请求。
下面是一个使用 Fetch API 的示例:
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
----- ----------- - -- -- -
----- ------ -------- - ---------------
------------ -- -
----- --------- - ----- -- -- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
--------------
--
------------
-- ----
------ -
-----
----- - -
----
-------------- -- -
--- ------------------------------
---
-----
- - -
-----------------
--
------
--
--
------ ------- ------------在这个示例中,我们使用 Fetch API 发起了一个 GET 请求,并将返回的数据展示在页面上。
通过以上示例,我们可以看到如何在 Create React App 中集成后端 API,并在前端界面上展示数据。