如何在 ReactJS 中使用 JSON 服务器获取 API 调用-慕源网

介绍

在本文中，我们将学习如何在 React 应用程序中使用 JSON 服务器获取 API 调用。

现在我们将开始创建一个新项目。

第1步

使用以下命令创建 React 项目设置，或者创建 React 应用程序。

npx create-react-app projectname

例子，

npx create-react-app sample-fetch

第 2 步 – 安装 React JSON-server

由于 JSON Server 可用作 NPM 包，因此我们可以使用 Node.js 包管理器执行安装。

在终端中运行以下命令。

npm install Json-server

第 3 步 – 创建一个包含数据的示例 JSON 文件

JSON Server 将从您的主项目文件夹中获取一个 JSON 文件，并将其转换为具有所有正确路由的 RESTful 数据库。

我在新创建的项目中使用以下示例数据创建了一个 JSON 文件db.json。

{
    "posts": [{
        "id": 1,
        "name": "Satheesh",
        "email": "Sat@mail.com",
        "adderss": "South street"
    }, {
        "id": 2,
        "name": "John",
        "email": "john@mail.com",
        "adderss": "North street"
    }, {
        "id": 3,
        "name": "Robert",
        "email": "robert@mail.com",
        "adderss": "East street"
    }, {
        "id": 4,
        "name": "Mani",
        "email": "mani@mail.com",
        "adderss": "West street"
    }],
    "comments": [{
        "id": 1,
        "body": "some comment",
        "postId": 1
    }],
    "profile": {
        "name": "typicode"
    }
}

第 4 步 – 运行服务器

通过执行以下命令启动 JSON 服务器。

json-server –watch db.json

我们的 JSON 服务器将在端口 3000 上运行。

第 5 步 – 获取 API

它在现代浏览器中可用，并允许我们使用 JavaScript 承诺发出请求。
我们可以使用 fetch() 方法来获取数据。
要使用 fetch 发出简单的 GET 请求，它包括我们要向其发出请求的 URL 端点
使用 Fetch API 获取所有帖子的列表。（端点http://localhost:3000/posts 等由已经运行的 JSON 服务器提供）
App 组件 (App.js) 的状态并填充用户状态变量

getFetchUsers() {
    this.setState({
        loading: true
    }, () => {
        fetch("http://localhost:3000/posts").then(res => res.json()).then(result => this.setState({
            loading: false,
            users: result
        })).catch(console.log);
    });
}

在获取 API 调用中，

首先是返回 JSON 对象

第二个是打印值。

第 6 步

Src/App.js

import React, {
    Component
} from 'react';
class App extends React.Component {
        state = {
            isLoading: true,
            users: [],
            error: null
        };
        getFetchUsers() {
            this.setState({
                loading: true
            }, () => {
                fetch("http://localhost:3000/posts").then(res => res.json()).then(result => this.setState({
                    loading: false,
                    users: result
                })).catch(console.log);
            });
        }
        componentDidMount() {
            this.getFetchUsers();
        }
        render() {
            const {
                users,
                error
            } = this.state;
            return (
              <React.Fragment>
              <h1>All User</h1>
              {
                    error ? <p>
              {
                        error.message
                    } < /p> : null}  {
                        users.map(user => {
                            const {
                                adderss,
                                name,
                                email
                            } = user;
                            return (
                            <div key={name}>
                                <p>Name: {name}</p>
                                <p>Email: {email}</p>
                                <p>Address: {adderss}</p>
                                <hr />
                            </div>
                            );
                        })
                    } < /React.Fragment> );
            }
        }
export default App;

第 7 步

现在我们将运行应用程序。