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