📌  相关文章
📜  如何从 ReactJS 中的 API 获取数据?

📅  最后修改于: 2022-05-13 01:56:49.647000             🧑  作者: Mango

如何从 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 {
    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);
    }
}


在 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/