Question

大家好，我试图通过使用访存函数调用API来获取我的React组件中的数据。我的文件夹结构如下。

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

2） src->服务（包含用于调用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)
  }

然后当我控制台到我的提取功能时，用于服务文件中。我得到了以下结果。

承诺。{pending}
proto ：承诺
[[ PromiseStatus ]]：“已解决”
[[ PromiseValue ]]：未定义
VM370：3 {userId：1，id：1，标题：“不提供公积金”，正文：“ quia etsuscipit↵suscipitrecusandae consequuntur…strum rerum est est autem sunt rem eveniet architecto”}

注意：我不想使用axios。

Answer 1

您的代码

  loadProfile(payload){
        this.user.last_name = payload.last_name,
        this.user.first_name =  payload.first_name,
        this.user.image = ( payload.image === 'no_avatar.png' ? '/image/no_avatar.png' : '/storage/images/'+ payload.image)
    }

中的

是承诺，但您只是在组件确实挂载时调用它首先更改getApiData，以便我们添加return：

getApiData

}

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

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

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

1 个答案: