Fetch API запрашивает несколько запросов get

Я хотел бы знать, как получить несколько URL-адресов GET сразу, а затем поместить извлеченные данные 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 с моего сервера, а затем отобразить мое ReactDOM со всеми этими данными JSON, переданными в него. Например:

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

это возможно? Если нет, то каковы другие решения для извлечения нескольких данных JSON в мой Rendering ReactDOM элемент?

7
fetch reactjs

3 ответов

вы можете положиться на обещания выполнить их все до вашего разрешения. Если вы привыкли к jQuery, вы также можете использовать обещания jQuery.

С Обещанием.все вы будете обеспечивать, чтобы каждый запрос был завершен, прежде чем продолжить выполнение кода

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 "Аякса".

кроме того, я настоятельно рекомендую вам взглянуть на Redux для обработки потока данных в контейнерах React. Будет сложнее настроить, но окупится в будущем.

обновление августа 2018 с async / await

на сегодняшний день fetch теперь реализован во всех последних версиях основных браузеров, за исключением IE11, оболочка все еще может быть полезна, если вы не используете polyfill для он.

затем, воспользовавшись новыми и теперь более стабильными функциями javascript, такими как деструктурирование и async/await, вы можете использовать аналогичное решение той же проблемы (см. код ниже).

Я считаю, что, хотя на первый взгляд может показаться немного больше кода, на самом деле это более чистый подход. Надеюсь, это поможет.

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

используйте некоторую реализацию Promise.all (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) чтобы сделать несколько запросов одновременно, а затем сделать то, что вы хотите с вашими данными после:

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]

  ...

})
1

Если запросы зависят друг от друга (скажем, вы получаете параметры в первом запросе, который вы будете использовать во втором запросе), вам придется вложить их в свою функцию ответа.

Если вы можете запускать эти запросы независимо друг от друга, вы можете это сделать, но вам придется синхронизировать все три (или больше?) перед отрисовкой компонента React.

0