请求多个 get 请求的 Fetch API [英] Fetch API requesting multiple get requests

问题描述

我想知道如何一次获取多个 GET URL，然后将获取的 JSON 数据放入我的 React DOM 元素中.

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.

这是我的代码:

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

但是，我想从我的服务器获取额外的 JSON 数据，然后将所有这些 JSON 数据传递给它来渲染我的 ReactDOM.例如:

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

这可能吗?如果没有，还有哪些其他解决方案可以将多个 JSON 数据提取到我的渲染 ReactDOM 元素中?

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

推荐答案

你可以依靠 Promise 在你的 then 决议之前执行它们.如果你习惯 jQuery，你也可以使用 jQuery Promises.

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.

使用 Promise.all，您将强制在继续执行代码之前完成每个请求

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

但是即使很难，截至今天，fetch 并没有在所有浏览器中实现，所以我强烈建议你创建一个额外的层来处理请求，在那里你可以调用 fetch 或使用回退，比如说 XmlHttpRequest 或 jQuery ajax.

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.

除此之外，我强烈建议您查看 Redux 来处理 React 容器上的数据流.设置起来会更复杂，但将来会有所回报.

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.

截至今天，所有最新版本的主流浏览器都实现了 fetch，但 IE11 除外，除非您使用 polyfill，否则包装器仍然有用.

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.

然后，利用解构和 async/await 等更新且现在更稳定的 javascript 功能，您也许可以使用类似的解决方案来解决相同的问题(请参阅下面的代码).

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

这篇关于请求多个 get 请求的 Fetch API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！