Fetch API demandant plusieurs recevoir des demandes

Question

Je voudrais savoir comment récupérer plusieurs GET URL à la fois, puis mettre les données JSON extraites dans mon élément DOM 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 chercher données JSON supplémentaires de mon serveur, puis rendre mon ReactDOM avec toutes ces données JSON transmises en elle. Par exemple:

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

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

Answer 1

Vous pouvez compter sur les promesses de les exécuter tous avant votre résolution puis . Si vous êtes habitué à jQuery, vous pouvez également utiliser les Promesses jQuery.

Avec Promise.all vous appliquerons que chaque demande est terminée avant de continuer avec votre exécution de 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, Fetch est pas mis en œuvre dans tous les navigateurs à partir d'aujourd'hui, donc je vous recommande vivement créer une couche supplémentaire pour traiter les demandes, il vous pouvez appeler l'autre ou d'utiliser un d'extraction fallback, disons XmlHttpRequest ou jQuery ajax. En plus de cela, je vous recommande vivement de jeter un oeil à Redux pour gérer le flux de données sur les conteneurs React. Sera plus compliqué à installer mais remboursera à l'avenir.

Answer 2

Si les demandes dépendent les uns des autres (que vous obtenez les paramètres de votre première demande que vous utiliserez dans votre deuxième demande) vous devrez imbriquer ces intérieur de votre fonction de réponse.

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

Answer 3

Utilisez une mise en œuvre de Promise.all (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) pour effectuer plusieurs demandes à la fois, puis faire 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] 

    ... 

})