从另一个页面使用 fetch 调用函数返回结果值，React native

Question

我需要从执行获取调用的 react native 中的另一个页面返回函数的结果。我使用的方法如下。据我所知，这是因为异步调用。有没有一种特殊的方法可以在本机反应中实现这一点？

fetchcall.js

 import address from '../actions/address'
const dashboard = {
  getvals(){

    return fetch(address.dashboardStats(),
    {method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify( {...
      }),
    })
    .then((response) => response.json())
    .then((responseData) => {
      console.warn(responseData);
      return responseData;

    })
    .catch((error) => { console.warn(error); })
    .done();
    // return 'test_val'';
  }
}

export default dashboard;

仪表板.js

 import dashboard from '../../services/dashboard';
class Dashboard extends Component {

  componentDidMount(){
      console.warn(dashboard.getvals());
  }

}

export default connect(mapStateToProps, bindAction)(Dashboard);

它将结果显示为“未定义”，但 fetch 调用有效并显示结果。有什么建议吗？

原文由 Dinith Minura 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 fetchcall.js 中，您将返回一个 Promise。此外，由于您在 .then() 方法本身中返回 responseData ，因此您不需要 .done() 方法。

由于 getvals() 正在返回一个 Promise，您需要在 .then() 方法中访问它的值。

总的来说，你的代码应该是这样的：

   function getvals(){
    return fetch('https://jsonplaceholder.typicode.com/posts',
    {
    	method: "GET",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    })
    .then((response) => response.json())
    .then((responseData) => {
      console.log(responseData);
      return responseData;
    })
    .catch(error => console.warn(error));
  }

  getvals().then(response => console.log(response));

原文由 Dani Akash 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为最好的架构模式是使用回调函数，通常是作为匿名函数写入。

 ///Component.js
my_service.login((data=>{
  this.setState({body: data.body});
}));

////Service.js
export  const login = function (cb){
  fetch('http://myapi.com/103?_format=hal_json')
    .then((response) =>{
      return response.json();
    })
    .then((data) =>{
      cb(data);
    });
}

我仍然是一名初级开发人员，但经常使用这种模式。如果有人有理由采用不同的方法，我很乐意听到。

原文由 Chris 发布，翻译遵循 CC BY-SA 3.0 许可协议