请求多个 get 请求的 Fetch API

Question

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

这是我的代码：

 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。例如：

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

这可能吗？如果没有，将多个 JSON 数据提取到我的渲染 ReactDOM 元素中的其他解决方案是什么？

原文由 Jaypizzle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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。

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

使用 async/await 更新 2018 年 8 月

到今天为止，所有最新版本的主流浏览器都实现了 fetch，除了 IE11，除非你使用 polyfill，否则包装器仍然有用。

然后，利用更新和现在更稳定的 JavaScript 功能，如解构和异步/等待，您可能可以使用类似的解决方案来解决相同的问题（参见下面的代码）。

我相信，尽管乍一看可能看起来多一点代码，但实际上是一种更清洁的方法。希望能帮助到你。

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

原文由 rdarioduarte 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我需要 json 格式的响应，所以我自己添加了一些代码

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

原文由 H.Sdq 发布，翻译遵循 CC BY-SA 4.0 许可协议