web-dev-qa-db-fra.com

Comment obtenir des données JSON à partir de fetch (react-native)

J'écris une petite application pour iPhone en utilisant réagit native. J'essaie d'extraire des données JSON d'un site Web à l'aide de fetch. Comme dans l'exemple:

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

Tout fonctionne bien mais je dois utiliser ces données plus tard. Lorsque j'essaie de l'assigner à une variable de la fonction json, j'obtiens "Erreur de requête" et ensuite, les données (correctement). Quelle est la meilleure pratique pour obtenir ces données et les inclure dans une variable pour les utiliser plus tard?

javascriptiosjsonreact-nativefetch-api
10
Michał Zubrzycki

Vous pouvez créer une variable dans le constructeur du composant:

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

Ensuite, vous mettez à jour cette variable lorsque vous avez besoin de:

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

Je l'ai fait comme ça. J'ai affiché la réponse sur console. Vous pouvez stocker les données de réponse dans votre variable d'état ou dans un stockage local à votre guise.

  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();
     }
5
coderzzz18

Mon cher ami, c'est très simple

Tout d’abord, comme vous le savez, chaque demande renvoie un en-tête et un corps

Lorsque nous utilisons fetch Une réponse par défaut qui est headers request . Si nous avons besoin de body of request, cela suffit - _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 ;
 });

Et si le corps de votre demande est html dom Utilisez simplement ce response.text()

Et si vous voulez retourner votre en-tête inutile de faire quoi que ce soit, ajoutez simplement cette ligne .then((response)=>response.json())

1
Mahdi Bashirpour

Moi fonctionne comme ça

C'est le bouton

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

C'est l'action

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

  }

résultat

[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

Dans mon cas, j’ai utilisé sails.js avec un passeport local, mais il est très similaire à tout autre framework node.js. Pour saisir ces variables, j’ai utilisé pour la connexion d’une fonction (req, res) où les variables étaient stockées dans req.body. Dans votre cas, req.body.name contiendra «Hubot» et req.body.login contiendra «hubot». La réponse sera envoyée à l'aide de res.send. Consultez la documentation de node.js pour plus de détails.

0
Mounir Dhahri