在 React 中进行 API 调用

Posted 2023-02-22

【中文标题】在 React 中进行 API 调用

【英文标题】：Making an API call in React

【发布时间】：2018-07-31 05:43:46

【问题描述】：

我正在尝试以返回 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 看起来是最好的方法，尽管我在语法上苦苦挣扎

【参考方案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"。

【讨论】：

您能否举一个示例，说明您的 JSON 数据区域的内容是什么？

SakoBu 的回答就是一个很好的例子。在他们的代码中，第二个 .then 回调将 JSON 对象映射到组件的状态（该变量称为 response 而不是 data，但它是相同的）。基本上，您通常会将数据分配给具有更大范围的另一个变量，或者调用函数将数据保存在某处。

但是如果我不在 Didmount 中编写 api 调用怎么办。如果我有特殊的操作页面，如何使用加载器。我也不想使用调度发送一个标志来停止加载程序。我正在寻找的是一旦我得到 api 的响应就停止加载器

【参考方案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  />
        <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/

【讨论】：

谢谢，这真的帮助我掌握了整个事情

我仍在苦苦挣扎的一件事是从本地文件中获取，在本例中为 Api.js，如我原来的帖子所示，如果我将获取更改为“.Api.js”或'./requests.json' 我收到一条错误消息，指出位置 0 处的 JSON 中的意外令牌

这不是问题所在，我无法从您的代码中真正看出...也许用完整代码制作一个 github 存储库并在此处发布链接...

但是如果我不在 Didmount 中编写 api 调用怎么办。如果我有特殊的操作页面，如何使用加载器。我也不想使用调度发送一个标志来停止加载程序。我正在寻找的是一旦我得到 api 的响应就停止加载器

【参考方案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

【讨论】：

但是如果我不在 Didmount 中编写 api 调用怎么办。如果我有特殊的操作页面，如何使用加载器。我也不想使用调度发送一个标志来停止加载程序。我正在寻找的是一旦我得到 api 的响应就停止加载器