web-dev-qa-db-ja.com

別のページからフェッチ呼び出し関数を使用して結果値を返します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);

結果は「未定義」として表示されますが、そのフェッチ呼び出しは機能し、結果が表示されます。なにか提案を？

javascriptreact-nativeasync-awaitfetch
7
Dinith Minura

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

最良のアーキテクチャパターンは、コールバック関数を使用することで、通常は匿名関数として書き込むことです。

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

私はまだ若い開発者ですが、このパターンを頻繁に使用します。誰かが別のアプローチの理由がある場合、私はそれを聞きたいです。

4
Chris