web-dev-qa-db-ja.com

フェッチからJSONデータを取得する方法（react-native）

反応ネイティブを使用してiPhone用の小さなアプリを書いています。 fetchを使用してWebサイトからJSONデータを取得しようとしています。例のように：

   function status(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  }
  throw new Error(response.statusText)
}

function json(response) {
  return response.json()
}


fetch('/users', {
  method: 'post',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
}).then(status)
  .then(json)
  .then(function(json) {
    console.log('request succeeded with json response', json)
  }).catch(function(error) {
    console.log('request failed', error)
  })

すべて正常に動作しますが、後でそのデータを使用する必要があります。 json関数の変数に割り当てようとすると、「リクエストエラー」が表示され、その後データが（正しく）取得されます。そのデータを取得し、後で使用するために変数に格納するためのベストプラクティスは何ですか？

javascriptiosjsonreact-nativefetch-api
10
Michał Zubrzycki

私はこのようにしました。応答をコンソールに表示しました。応答データは、必要に応じて状態変数またはローカルストレージに保存できます。

  doSignUp() {

     console.log("inside post api");
     fetch('your API URL', {
     method: 'POST',
     headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json',

                },


      body: JSON.stringify({
      password: this.state.password,
      email:this.state.email,
      name: this.state.firstname,
      last_name :this.state.last_name,
      mobile:this.state.mobile,
      ssn:"2222222"

     })
      }).then((response) => response.json())
        .then((responseData) => {
                                 console.log("inside responsejson");
                                 console.log('response object:',responseData)

         }).done();
     }
7
coderzzz18

コンポーネントのコンストラクターで変数を作成できます。

constructor(props) {
    super(props);
    this.state = {
       jsonData: ''
    }
}

次に、必要なときにこの変数を更新します。

 .then((responseData) => {
    this.setState({
      jsonData: responseData
    });
  })
6
nicopasso

親愛なる友人、これは非常に簡単です

まず、ご存じのとおり、各リクエストはheaderとbodyを返します

fetchを使用する場合、デフォルトの応答はheaders requestです。リクエストのbodyが必要な場合は、それで十分ですresponse.json()

_return fetch(url,{
  method: 'POST',//GET and ...
  headers:{
      Accept: 'application/json',
      'Content-Type': 'application/json',
  },
  body: JSON.stringify({
      Elm: "Elm" //is fake
  })
 })
 .then((response)=>response.json()) //   <------ this line 
 .then((response)=>{
   return response ;
 });
_

そして、リクエストのbodyがhtml domである場合、これを使用してくださいresponse.text()

header何もする必要がない場合は、この行を追加してください.then((response)=>response.json())

1
Mahdi Bashirpour

私はこのように働いています

これはボタンです

<Button onPress={this._onPressButton} accessibilityLabel="tap!!!" />

これはアクションです

  _onPressButton() {

  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      console.log(responseJson.movies);
    })
    .catch((error) => {
      console.error(error);
    });

  }

結果

[14:30:19] Array [
[14:30:19]   Object {
[14:30:19]     "id": "1",
[14:30:19]     "releaseYear": "1977",
[14:30:19]     "title": "Star Wars",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "2",
[14:30:19]     "releaseYear": "1985",
[14:30:19]     "title": "Back to the Future",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "3",
[14:30:19]     "releaseYear": "1999",
[14:30:19]     "title": "The Matrix",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "4",
[14:30:19]     "releaseYear": "2010",
[14:30:19]     "title": "Inception",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "5",
[14:30:19]     "releaseYear": "2014",
[14:30:19]     "title": "Interstellar",
[14:30:19]   },
[14:30:19] ]
[14:30:19] Array [
[14:30:19]   Object {
[14:30:19]     "id": "1",
[14:30:19]     "releaseYear": "1977",
[14:30:19]     "title": "Star Wars",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "2",
[14:30:19]     "releaseYear": "1985",
[14:30:19]     "title": "Back to the Future",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "3",
[14:30:19]     "releaseYear": "1999",
[14:30:19]     "title": "The Matrix",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "4",
[14:30:19]     "releaseYear": "2010",
[14:30:19]     "title": "Inception",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "5",
[14:30:19]     "releaseYear": "2014",
[14:30:19]     "title": "Interstellar",
[14:30:19]   },
[14:30:19] ]
0
Ryosuke Hujisawa

私の場合、パスポートローカルでsails.jsを使用しましたが、他のnode.jsフレームワークと非常によく似ており、変数がreq.bodyに格納されている関数（req、res）のサインインに使用したこれらの変数をキャッチします。あなたの場合、req.body.nameには「Hubot」が含まれ、req.body.loginには「hubot」が含まれます。res.sendを使用して応答が送信されます。詳細については、node.jsのドキュメントを確認してください。

0
Mounir Dhahri