reactjs - Fetch API 请求多个 get 请求

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 元素中？

Answer 1

您可以依靠 Promise 在您当时的决议之前执行所有这些内容。如果您习惯了 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 容器上的数据流。设置起来会更复杂，但将来会得到返回。

2018 年 8 月更新 async/await

截至今天，除 IE11 之外，所有最新版本的主要浏览器都已实现 fetch，除非您使用 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);
};