在 React JS 中使用 Fetch 获取 API 数据

Question

大家好，我正在尝试通过使用 fetch 函数调用 API 来获取我的 React 组件中的数据。我的文件夹结构如下所示。

1) src->components（我所有的组件都放在这里。）

2) src->services（包含调用API函数的文件。）

下面是我的组件，我从服务文件调用函数来获取 API 数据。

import React from 'react';
import {getApiData} from '../services/';

class Dashboard extends React.Component {
  constructor(){
    super();
    this.state={
      result:''
    }
  }
  componentDidMount(){
    const data =  getApiData();
    console.log(data);
  }
  render(){
    return(
     <div></div>
    );
  }
}

export default Dashboard;

下面是我的服务文件代码，用于从 API 获取数据并返回。

  export function getApiData(){
    fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then((data)=>data.json())
    .then((res)=>res)
  }

当我控制台到我的 fetch 函数时，在服务文件中使用。我得到了以下结果。

承诺 {待处理}
原型：承诺
[[PromiseStatus]]：“已解决”
[[PromiseValue]]：未定义
VM370:3 {userId: 1, id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", body: "quia et suscipit↵suscipit recusandae consequuntur ...strum rerum est autem sunt rem eveniet architecto"}

注意：我不想使用 axios。

Answer 1

在您的代码中getApiData 是承诺，但您只需在组件中调用它就可以了 首先更改 getApiData 以便我们添加 return ：

 export function getApiData(){
     return fetch('https://jsonplaceholder.typicode.com/posts/1')
     .then((data)=>data.json())
     .then((res)=>res)

}

现在我们可以在 didComponet 中访问它：

componentDidMount(){
    getApiData().then(data=>{
       console.log(data);

     //or set in state
     this.setState({result:data})
     });
 }