web-dev-qa-db-fra.com

Renvoie la valeur du résultat avec la fonction d'appel fetch à partir d'une autre page, React native

J'ai besoin de renvoyer le résultat d'une fonction d'une autre page en réagissant natif qui effectue un appel de récupération. J'utilise la méthode comme suit. Comme je le sais, c'est parce que l'appel asynchrone. Existe-t-il un moyen spécial d'y parvenir dans 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);

Son affiche le résultat comme "non défini", mais cet appel de récupération fonctionne et il affiche le résultat. Toute suggestion?

javascriptreact-nativeasync-awaitfetch
7
Dinith Minura

Dans fetchcall.js vous retournez une promesse. De plus, puisque vous retournez la responseData dans la méthode .then() elle-même, vous n'avez pas besoin de la méthode .done().

Puisque getvals() renvoie une promesse, vous devez accéder à sa valeur dans une méthode .then().

Dans l'ensemble, votre code devrait être comme ceci:

  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));
22
Dani Akash

Le meilleur modèle architectural, je pense, est d'utiliser une fonction de rappel, généralement en écrivant comme une fonction anonyme.

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

Je suis encore un développeur junior, mais j'utilise fréquemment ce modèle. Si quelqu'un a une raison pour une approche différente, j'aimerais l'entendre.

4
Chris