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

Question

I need to return the result of a function from another page in react native which performing a fetch call. I use the method as follows. As I know this is because asynchronous call. Is there a special way to achieve this in 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;

dashboard.js

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


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

}

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

Its display the result as "undefined", but that fetch call works and it displays the result. Any suggestion?

Answer 1

In fetchcall.js you are returning a Promise. Also since you are returning the responseData in the .then() method itself, you don't need the .done() method.

Since getvals() is returning a Promise, you need to access it's value in a .then() method.

Overall, your code should be like this:

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

Answer 2

The best architectural pattern, I think, is to use a callback function, usually by writing in as an anonymous function.

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

I am still a junior developer, but use this pattern frequently. If someone has a reason for a different approach, I would love to hear it.

Answer 3

fetch always return a Promise doesn't matter what you are returning. so you can return a string, variable or something else but you have to use .then to access data

file where you make fetch request

export const graphql = () => {
  return fetch("https://graphqlzero.almansi.me/api", {
    "method": "POST",
    "headers": { "content-type": "application/json" },
    "body": JSON.stringify({
      query: `{
      user(id: 1) {
        id
        name
      }
    }`
    })
  })
    .then((res) => res.json()).then((responseData) => {
      console.log(responseData);
      return responseData;
    })


}

file where you call function

 graphql()
 .then((e) => {
     console.log("data", e)
  });