web-dev-qa-db-ja.com

複数の取得リクエストをリクエストするAPIを取得する

複数の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要素にフェッチする他のソリューションは何ですか？

reactjsfetch
12
Jaypizzle

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);
            });
5
H.Sdq

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]

  ...

})
4
Lance Whatley

リクエストが互いに依存している場合（最初のリクエストでパラメーターを取得し、2番目のリクエストで使用する場合）、これらをレスポンス関数内にネストする必要があります。

これらのリクエストを互いに独立して実行できる場合は実行できますが、Reactコンポーネントをレンダリングする前に3つ（またはそれ以上）で同期する必要があります。

0
Morpheu5