Javascript 使用Fetch in React JS获取API数据

大家好，我正在尝试通过使用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;

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

承诺{pending}
协议：承诺
[[PromiseStatus]]：“已解决”
[[PromiseValue]]：未定义
VM370:3{用户id:1，id:1，标题：“必须遵守法律，不得违反法律”，正文：“权利和义务”↵建筑业的可持续发展……建筑业的可持续发展

---

注意：我不想使用axios。

在您的代码中

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})
     });
 }

---

那么使用fetch有什么问题呢？我可以看到

data=getApiData（）

不起作用，但我不明白你的问题，你不确定如何使用承诺吗？getApiData方法在你的/services/index.js中吗？是的，@lost_in_magento它在我的services/index.js文件中。我已经尝试过这个方法。它不起作用。@kunal我更新了我的答案谢谢@MBehtemam，但是你能解释一下，为什么我们需要在取回之前预先准备返回。因为我已经回来了。

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

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