Chercher de l'API demandant de multiples requêtes get

Je voudrais savoir comment faire pour récupérer plusieurs OBTENIR des Url à la fois et de mettre ensuite extraites des données JSON dans mon Réagir élément du DOM.

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 supplémentaires JSON datas de mon serveur, et ensuite de rendre ma ReactDOM avec toutes ces données JSON passés dans celui-ci. Par exemple:

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

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

Double Possible de Attendre jusqu'à ce que tous les ES6 promesses complète, voire rejeté les promesses

OriginalL'auteur Jaypizzle | 2017-09-15

  1. 17

    Vous pouvez compter sur les Promesses d'exécuter tous avant de votre résolution. Si vous avez l'habitude de jQuery, vous pouvez utiliser jQuery Promesses.

    Avec Promesse.tout ce que vous assurer que chaque demande est terminé avant de continuer avec votre code d'exécution

    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 les plus difficiles, fetch n'est pas mis en œuvre dans tous les navigateurs d'aujourd'hui, donc je vous recommande fortement de créer une couche supplémentaire pour gérer les demandes, vous pouvez appeler l'extraction ou l'utilisation de secours, sinon, disons que XmlHttpRequest ou jQuery ajax.

    En plus de cela, je vous recommande fortement de prendre un coup d'oeil à Redux à traiter le flux de données sur les Réagissent Conteneurs. Sera plus compliqué pour l'installation, mais sera payante à l'avenir.

    Mise à jour août 2018 avec async/await

    D'aujourd'hui, le fetch est maintenant mis en œuvre dans toutes les version la plus récente des principaux navigateurs, à l'exception de IE11, une enveloppe pourrait encore être utile, sauf si vous utilisez un polyfill.

    Ensuite, profitant de la plus récente et maintenant plus stable javascript fonctionnalités comme la déstructuration et async/await, vous pourriez être en mesure d'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, est en fait un nettoyant approche. Espérons que cela 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);
};
    Pour info chercher polyfills sont faciles à intégrer à prendre en charge les navigateurs qui n'ont pas mis en œuvre de manière native encore: npmjs.com/package/whatwg-fetch

    OriginalL'auteur rdarioduarte

  2. 2

    Utiliser certaines de mise en œuvre de Promise.all (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) de faire plusieurs demandes à la fois, puis faire ce que vous voulez avec vos données par la suite:

    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]

  ...

})

    OriginalL'auteur Lance Whatley

  3. 2

    J'avais besoin de le format json réponse 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);
            });

    OriginalL'auteur H.Sdq

  4. 0

    Si les demandes dépendent les uns des autres (dites que vous obtenir les paramètres de votre première demande que vous pourrez utiliser dans votre deuxième demande) le nid de ces à l'intérieur de votre fonction de réponse.

    Si vous pouvez exécuter ces demandes indépendamment les uns des autres, vous pouvez le faire, mais vous devrez synchroniser sur tous les trois (ou plus?) avant de rendre votre Réagissent composant.

    OriginalL'auteur Morpheu5