json - 在 React 中进行 API 调用

Question

我正在尝试在 React 中进行 API 调用以返回 JSON 数据，但我对如何执行此操作有点困惑。我的 API 代码位于 API.js 文件中，如下所示:

import mockRequests from './requests.json'

export const getRequestsSync = () => mockRequests

export const getRequests = () =>
new Promise((resolve, reject) => {
setTimeout(() => resolve(mockRequests), 500)
})

它正在检索格式如下的 JSON 数据:

{
"id": 1,
"title": "Request from Nancy",
"updated_at": "2015-08-15 12:27:01 -0600",
"created_at": "2015-08-12 08:27:01 -0600",
"status": "Denied"
 }

目前我用于进行 API 调用的代码如下所示:

import React from 'react'

const API = './Api.js'

const Requests = () => ''

export default Requests

我已经看过几个例子，但对于如何解决这个问题仍然有点困惑。如果有人能指出我正确的方向，我将不胜感激。

编辑:在我见过的大多数示例中，尽管我在语法上遇到了困难，但 fetch 看起来是最好的方法

Answer 1

这是一个使用实时 API ( https://randomuser.me/ ) 的简单示例...它返回一个对象数组，如您的示例所示:

import React from 'react';

class App extends React.Component {
  state = { people: [], isLoading: true, error: null };

  async componentDidMount() {
    try {
      const response = await fetch('https://randomuser.me/api/');
      const data = await response.json();
      this.setState({ people: data.results, isLoading: false });

    } catch (error) {
      this.setState({ error: error.message, isLoading: false });
    }
  }

  renderPerson = () => {
    const { people, isLoading, error } = this.state;

    if (error) {
      return <div>{error}</div>;
    }

    if (isLoading) {
      return <div>Loading...</div>;
    }

    return people.map(person => (
      <div key={person.id.value}>
        <img src={person.picture.medium} alt="avatar" />
        <p>First Name: {person.name.first}</p>
        <p> Last Name: {person.name.last}</p>
      </div>
    ));
  };

  render() {
    return <div>{this.renderPerson()}</div>;
  }
}

export default App;

有道理吗？应该很简单......

现场演示:https://jsfiddle.net/o2gwap6b/