web-dev-qa-db-fra.com

API d'extraction demandant plusieurs demandes d'obtention

Je voudrais savoir comment récupérer plusieurs URL GET à la fois, puis placer les données JSON récupérées dans mon élément DOM React React.

Voici mon code:

fetch("http://localhost:3000/items/get")
.then(function(response){
        response.json().then(
            function(data){
                ReactDOM.render(
                    <Test items={data}/>,
                    document.getElementById('overview')
                );}
        );
    })
.catch(function(err){console.log(err);});

Cependant, je voudrais récupérer des données JSON supplémentaires sur mon serveur, puis rendre mon ReactDOM avec toutes ces données JSON qui y sont passées. Par exemple:

ReactDOM.render(
   <Test items={data} contactlist={data2} itemgroup={data3}/>,
   document.getElementById('overview')
);

Est-ce possible? Sinon, quelles sont les autres solutions pour récupérer plusieurs données JSON dans mon élément ReactDOM de rendu?

reactjsfetch
12
Jaypizzle

Vous pouvez compter sur Promises pour toutes les exécuter avant votre résolution. Si vous avez l'habitude de jQuery, vous pouvez également utiliser jQuery Promises.

Avec Promise.all, vous veillerez à ce que chaque demande soit terminée avant de poursuivre l'exécution de votre code

Promise.all([
  fetch("http://localhost:3000/items/get"),
  fetch("http://localhost:3000/contactlist/get"),
  fetch("http://localhost:3000/itemgroup/get")
]).then(([items, contactlist, itemgroup]) => {
    ReactDOM.render(
        <Test items={items} contactlist={contactlist} itemgroup={itemgroup} />,
        document.getElementById('overview');
    );
}).catch((err) => {
    console.log(err);
});

Mais même difficile, l'extraction n'est pas implémentée dans tous les navigateurs à ce jour, donc je vous recommande fortement de créer une couche supplémentaire pour gérer les demandes, là vous pouvez appeler l'extraction ou utiliser une alternative sinon, disons XmlHttpRequest ou jQuery ajax.

En plus de cela, je vous recommande fortement de jeter un œil à Redux pour gérer le flux de données sur les conteneurs React. Cela sera plus compliqué à configurer mais sera payant dans le futur.

Mise à jour d'août 2018 avec async/wait

À ce jour, la récupération est maintenant implémentée dans toutes les dernières versions des principaux navigateurs, à l'exception d'IE11, un wrapper pourrait toujours être utile à moins que vous n'utilisiez un polyfill pour cela.

Ensuite, en profitant de fonctionnalités javascript plus récentes et plus stables telles que la déstructuration et l'async/wait, vous pourrez peut-être utiliser une solution similaire pour le même problème (voir le code ci-dessous).

Je crois que même si à première vue peut sembler un peu plus de code, c'est en fait une approche plus propre. J'espère que ça aide.

try {
  let [items, contactlist, itemgroup] = await Promise.all([
    fetch("http://localhost:3000/items/get"),
    fetch("http://localhost:3000/contactlist/get"),
    fetch("http://localhost:3000/itemgroup/get")
  ]);

  ReactDOM.render(
    <Test items={items} contactlist={contactlist} itemgroup={itemgroup} />,
      document.getElementById('overview');
  );
}
catch(err) {
  console.log(err);
};
27
rdarioduarte

J'avais besoin de la réponse au format json, j'ai donc ajouté un peu de code moi-même

Promise.all([
            fetch(url1).then(value => value.json()),
            fetch(url2).then(value => value.json())
            ])
            .then((value) => {
               console.log(value)
              //json response
            })
            .catch((err) => {
                console.log(err);
            });
5
H.Sdq

Utilisez une implémentation de Promise.all ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all ) pour faire plusieurs demandes à la fois, puis faites ce que vous voulez avec vos données après:

Promise.all([
  fetch("http://localhost:3000/items/get1"),
  fetch("http://localhost:3000/items/get2"),
  fetch("http://localhost:3000/items/get3")
]).then(allResponses => {
  const response1 = allResponses[0]
  const response2 = allResponses[1]
  const response3 = allResponses[2]

  ...

})
4
Lance Whatley

Si les demandes dépendent les unes des autres (par exemple, vous obtenez des paramètres dans votre première demande que vous utiliserez dans votre deuxième demande), vous devrez les imbriquer dans votre fonction de réponse.

Si vous pouvez exécuter ces requêtes indépendamment les unes des autres, vous pouvez le faire, mais vous devrez vous synchroniser sur les trois (ou plus?) Avant de rendre votre composant React.

0
Morpheu5