提取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?

推荐答案

在解决之前，您可以依靠Promises来执行它们.如果您习惯使用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);
});

但是，即使很艰难，到目前为止，并非所有浏览器都实现了访存，因此我强烈建议您创建一个附加层来处理请求，在那里您可以调用访存或使用后备，否则，我们说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.

到目前为止，除了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.

然后，利用诸如销毁和异步/等待之类的更新且现在更稳定的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);
};

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