Fetch API requesting multiple get requests

问题

I would like to know how to fetch multiple GET URLs at once and then put the fetched JSON data into my React DOM element.

Here is my 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);});

However, I would like to fetch additional JSON datas from my server and then render my ReactDOM with all these JSON datas passed into it. For example:

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

Is this possible? If not, what are other solutions to fetching multiple JSON data into my rendering ReactDOM element?

回答1:

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

回答2:

Use some implementation of Promise.all (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) to make multiple requests at a time, then do what you want with your data afterwards:

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]

  ...

})

回答3:

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

回答4:

If the requests depend on each other (say you get parameters in your first request that you'll use in your second request) you will have to nest these inside your response function.

If you can run these requests independently of each other, you can do so, but you will have to synchronise on all three (or more?) before rendering your React component.

来源：https://stackoverflow.com/questions/46241827/fetch-api-requesting-multiple-get-requests