在 React 中进行 API 调用 [英] Making an API call in React

问题描述

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

从 './requests.json' 导入 mockRequestsexport const getRequestsSync = () =>模拟请求export const getRequests = () =>新承诺((解决，拒绝)=> {setTimeout(() => resolve(mockRequests), 500)})

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

<代码>{身份证":1，"title": "来自南希的请求","updated_at": "2015-08-15 12:27:01 -0600","created_at": "2015-08-12 08:27:01 -0600",状态":拒绝"}

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

从 'react' 导入 Reactconst API = './Api.js'const 请求 = () =>''导出默认请求

我查看了几个示例，但仍然对如何进行此操作感到有些困惑.如果有人能指出我正确的方向，我将不胜感激.

在我见过的大多数例子中， fetch 看起来是最好的方法，尽管我在语法上苦苦挣扎

解决方案

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

从'react'导入React；类 App 扩展了 React.Component {state = { people: [], isLoading: true, error: null };异步 componentDidMount() {尝试 {const response = await fetch('https://randomuser.me/api/');const 数据 = 等待 response.json();this.setState({ people: data.results, isLoading: false });} 捕捉(错误){this.setState({ error: error.message, isLoading: false });}}renderPerson = () =>{const { people, isLoading, error } = this.state;如果(错误){返回<div>{error}</div>;}如果(正在加载){返回<div>加载中...</div>;}返回 people.map(person => (<div key={person.id.value}><img src={person.picture.medium} alt="头像"/><p>名字:{person.name.first}</p><p>姓氏:{person.name.last}</p>

));};使成为() {返回<div>{this.renderPerson()}</div>;}}导出默认应用程序；

有意义吗?应该很直接...

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

I am trying to make an API call in React to return JSON data but I am a bit confused on how to go about this. My API code, in a file API.js, looks like this:

import mockRequests from './requests.json'

export const getRequestsSync = () => mockRequests

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

It is retrieving JSON data formatted like this:

{
"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"
 }

Currently my code to make the API call looks like this:

import React from 'react'

const API = './Api.js'

const Requests = () => ''

export default Requests

I've looked at several examples and am still a bit confused by how to go about this. If anyone could point me in the right direction, it would be greatly appreciated.

EDIT: In most examples I've seen, fetch looks like the best way to go about it, though I'm struggling with the syntax

解决方案

Here is a simple example using a live API (https://randomuser.me/)... It returns an array of objects like in your example:

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;

Does it make sense? Should be pretty straight forward...

Live Demo Here: https://jsfiddle.net/o2gwap6b/

这篇关于在 React 中进行 API 调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！