Fetch API requesting multiple get requests

I needed the json format response so I added a little bit of code myself

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

You can rely on Promises to execute them all before your then resolution. If you are used to jQuery, you can use jQuery Promises as well.

With Promise.all you will enforce that every request is completed before continue with your code execution

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

But even tough, fetch is not implemented in all browsers as of today, so I strongly recommend you to create an additional layer to handle the requests, there you can call the fetch or use a fallback otherwise, let's say XmlHttpRequest or jQuery ajax.

Besides of that, I strongly recommend you to take a look to Redux to handle the data flow on the React Containers. Will be more complicated to setup but will pay off in the future.

Update August 2018 with async/await

As of today, fetch is now implemented in all the latest version of the major browsers, with the exception of IE11, a wrapper could still be useful unless you use a polyfill for it.

Then, taking advantage of newer and now more stable javascript features like destructuring and async/await, you might be able to use a similar solution to the same problem (see the code below).

I believe that even though at first sight may seem a little more code, is actually a cleaner approach. Hope it helps.

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