在 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

你会想做这样的事情：

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 的非常好的文档，我强烈建议您阅读。

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

Answer 2

这是一个使用实时 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 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