Comment obtenir des données JSON à partir de fetch (réaction de-natif)

J'écris petite application pour iPhone à l'aide de réagir natif. Je suis en train de récupérer les données JSON à partir 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 j'ai besoin d'utiliser que les données plus tard. Lorsque j'essaie de l'affecter à une variable en fonction json, j'obtiens "erreur de Requête" et après cela, obtenir les données (correctement). Quelle est la meilleure pratique pour obtenir des données et de l'avoir dans une variable pour l'utiliser plus tard?

OriginalL'auteur Michał Zubrzycki | 2015-05-05

6

Vous pouvez créer une variable dans le composant constructeur:
```
constructor(props) {
    super(props);
    this.state = {
       jsonData: ''
    }
}
```
Puis vous mettre à jour cette variable quand vous en avez besoin:
```
 .then((responseData) => {
    this.setState({
      jsonData: responseData
    });
  })
```
dans la méthode de récupération, vous avez généralement deux arrêtera comme ceci:.then((response) => { response.text(); console.log(response); }) .then((responseText) => { console.log(responseText); }) .catch((error) => { console.warn(error); }) .done(); je me demandais ce que fait chacun des deux retourne alors et pourquoi est-elle organisée de cette façon? comment fonctionnent-ils?
Le 2 obtient alors exécutées de manière séquentielle, le 1er est alors à obtenir le texte de la réponse de l'objet et le 2ème est à imprimer le texte en valeur.

OriginalL'auteur nicopasso

J'ai fait comme ça. J'ai affiché la réponse de la console. Vous pouvez stocker les données de réponse dans votre variable d'état ou dans le local de stockage que vous le souhaitez.

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

OriginalL'auteur coderzzz18

1

Mon cher ami, c'est très simple

Tout d'abord, comme vous le savez, chaque requête retourne une en-tête et un corps

Lorsque nous utilisons chercher
une réponse par défaut qui est les en-têtes de demande.
Si nous avons besoin de corps de la demande, c'est assez 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 dom html il suffit d'utiliser cette response.text()

Et si vous souhaitez retourner votre en-tête n'avez rien à faire, il suffit d'ajouter cette ligne .then((response)=>response.json())

OriginalL'auteur Mahdi Bashirpour
0

Dans mon cas, j'ai utilisé un sails.js avec passeport local, mais il est très semblable à celle de tout autre node.js cadre, pour attraper ces variables que j'ai utilisé pour signin un function(req,res) où les variables où sont stockées dans le req.corps. Dans votre cas, req.corps.nom de contenir des "Hubot" et req.corps.connexion contiennent des "hubot'.La réponse sera envoyée à l'aide de res.envoyer. de vérifier la node.js la documentation pour plus de détails.

OriginalL'auteur Mounir Dhahri

Moi fonctionne comme ceci

C'est le bouton

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

Cette 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] ]

<Bouton onPress={présent._onPressButton} title="obtenir des données json" color="#841584" />
☝︎J'ai besoin de faire des boutons comme ça désolé
Et je pense que pas de travail local et http hôte comme ça de la merde "localhost:3000/api/inscription"

OriginalL'auteur Ryosuke Hujisawa

Vous devez vous connecter pour publier un commentaire.