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/

Answer 2

你会想做这样的事情：

var url = 'https://myAPI.example.com/myData';
fetch(url).then((response) => response.json())
          .then(function(data) { /* do stuff with your JSON data */})
          .catch((error) => console.log(error));

Mozilla有关于使用fetch here的非常好的文档，我强烈建议您阅读。

第二个data中的.then参数将是从您获得的JSON响应中解析的对象，您可以通过使用JSON中的属性标签来访问其中的属性。例如，data.title将为"Request from Nancy"。

Answer 3

如果您对fetch感到苦苦挣扎，Axios有一个更简单的 API可供使用。

在您的API.js文件中尝试此操作（当然首先使用npm i --save axios安装axios）：

import axios from 'axios'
import mockRequests from './requests.json'

export const getRequests = (url) => {
  if (url) {
    return axios.get(url).then(res => res.data)
  }

  return new Promise((resolve, reject) => { // you need to return the promise
    setTimeout(() => resolve(mockRequests), 500)
  })
})

在您的组件中，您可以像这样访问getRequests功能

import React, { Component } from 'react'
import { getRequests } from './API.js'

class App extends Component {
  state = { 
    data: null
  }

  componentWillMount() {
    getRequests('http://somedomain.com/coolstuff.json').then(data => {
      console.log(data)
      this.setState({ data })
    })
  }

  render() {
    if (!this.state.data) return null

    return (
      <div className='App'>
        {this.state.data.title}
      </div>
    )
  }
}

export default App

在React中进行API调用

3 个答案: