如何从 ReactJS 中的 API 获取数据？

ReactJS： ReactJS 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。它是 MVC 中的“V”。 ReactJS 是一个开源的、基于组件的前端库，只负责应用程序的视图层。它由 Facebook 维护。

API： API是Application Programming Interface的缩写，是各种程序之间用来进行通信的通信协议和子程序的集合。程序员可以使用各种 API 工具来简化程序。此外，API 为程序员提供了一种开发软件程序的有效方式。

方法：在本文中，我们将了解如何从 API（应用程序编程接口）获取数据。对于数据，我们使用了来自 http://jsonplaceholder.typicode.com/users 的 API 端点，我们在 App.js 中创建了组件并在 App.css 中为组件设置样式。在 API 中，我们有目标“id”、“name”、“username”、“email”，并从 API 端点获取数据。下面是我们如何在 react 中从 API 获取数据的逐步实现。我们将使用 fetch函数从 API 中获取数据。

逐步实现从反应中的 api 获取数据。

• 第 1 步：创建 React 项目

  npm create-react-app MY-APP 

• 第 2 步：更改您的目录并输入您的主文件夹图表为

  cd MY-APP

• 第 3 步： API 端点

  https://jsonplaceholder.typicode.com/users

  

  API

• 第 4 步：在 App.js 中编写代码以从 API 获取数据，我们正在使用 fetch函数。

项目结构：它将如下所示。

项目结构

例子：

App.js

import React from "react";
import './App.css';
class App extends React.Component {
   
    // Constructor 
    constructor(props) {
        super(props);
   
        this.state = {
            items: [],
            DataisLoaded: false
        };
    }
   
    // ComponentDidMount is used to
    // execute the code 
    componentDidMount() {
        fetch(
"https://jsonplaceholder.typicode.com/users")
            .then((res) => res.json())
            .then((json) => {
                this.setState({
                    items: json,
                    DataisLoaded: true
                });
            })
    }
    render() {
        const { DataisLoaded, items } = this.state;
        if (!DataisLoaded) return 

            
 Pleses wait some time.... 
 
 ;
   
        return (
        

            
 Fetch data from an api in react 
  {
                items.map((item) => ( 
                

                    User_Name: { item.username }, 
                    Full_Name: { item.name }, 
                    User_Email: { item.email } 
                    
                ))
            }
        
    );
}
}
   
export default App;

在 App.css 中编写代码以设置 app.js 文件的样式。

应用程序.css

.App {
    text-align: center;
    color: Green;
}
.App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
}
.App-link {
    color: #61dafb;
}
  
@keyframes App-logo-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：打开浏览器，我们的项目显示在 URL http://localhost:3000/