JavaScript fetchをループで実行したい

Question

以下のようなAPIがあると仮定します。

• データベースに1000種類のデータがあり、インデックスはそれぞれ1〜1000です。
• 次のようなgetリクエストを送ることでjsonファイルを取得することができます。

　https://example.test/getJson?beginIndex=400&endIndex=500
この場合、インデックス400〜500のデータが格納されたjsonファイルを受け取ることになります。

• しかし、一度に指定できるデータの数は100種類のみとします。

　そのため、100〜500などのリクエストはエラーが返ってきます。

以上のAPIを使い、1〜1000のデータをすべて取得したいとき、fetchを使ってどのように書けばよいでしょうか。
async/await(非同期処理)について理解が浅いため、以下のようにコードを書いてみたのですが思ったとおりの動作をしてくれません。(分かる人が見れば当然なのかもしれませんが...)

const URL = "https://example.test/getJson?";

for(i = 1; i < 1000; i+=100){
  fetch(URL + "beginIndex=" + i + "&endIndex=" + (i+99))
  .then(response => response.json())
  .then(function(json){
    console.log(json);
  })
  .catch(error => {
    console.log(error);
  });
}

1〜1000を100ずつ10回取得することで実装しようと考えておりますが、具体的にどうすれば思ったとおりの動作をしてくれるかご教授いただけたらと思います。

追記:
7行目のconsole.logの結果を見ると、undefined を出力していました。
おそらくresponseを待たずに次のループに入っているからだと思うのですが、具体的な解決策が分かりません。
期待する動作は、
1-100でリクエストを送信→レスポンスを受け取り後、次は101-200でリクエストを送信...
これを901-1000まで繰り返したいです。
送信→受け取り→次のループ処理→送信... とするためには、安直にループで囲むだけでは難しいでしょうか。

Comments

[gentaro]

「思ったとおりの動作をしてくれません」と書かれてもよくわかんないので、「どうなったのか」を書きましょう。

[nyaaway]

詳細を書かず申し訳ございません。
追記させていただきます。

Answer 1

コードを眺めても特におかしなところはないように思えます。

たとえresponseが返ってくるのを待たずに次のループに入ったとしても、
サーバー側で多重リクエストを禁止していたりしない限り、非同期にリクエストを投げるだけで問題なく動作するはずです。

また、7行目までは実行されるということなので、レスポンスも正常に返ってきているように思えます。

考えられる原因としては、サーバーからjson()メソッドでparseできない形式でレスポンスが返ってきている。
とかでしょうか

もしもブラウザ上で実行している場合は、devtoolのnetworkタブなどで実際に行われているリクエストとレスポンスの中身を確認することができるので、一度リクエストの中身を確認してみるのが良いと思います。

また、for文を削除すると動くというのであれば、iが存在するデータのindexよりも大きくなると、レスポンスがうまく返ってこないとかはあるかもしれません。

いずれにしろレスポンスに何が返ってくるかはサーバー側に依存するので、postmanなどのツールを使って確認してみるのも良いと思います

余談ですが、

for文のiにletをつけないとiのスコープがfor文の外まで広がってしまうので良くないです。(そもそも"use strict";がついている環境だとエラーになります)

for(i = 1; i < 1000; i+=100){
}

ではなく、以下のほうが良い

for(let i = 1; i < 1000; i+=100){
}

Comments

[nyaaway]

回答ありがとうございます。　for文のiにつきましては作成中のプログラムではlet iで宣言していました。ただよく忘れてしまうので気をつけたいと思います。
undefinedが出力されていた問題については全然関係ない箇所のバグだったため解決することができました...

Answer 2

単純にhttps://example.testがCORS制約にかかってエラーになっているのでは？

sample

読み終わってから次を読むasync/awaitのサンプル

• mypage.html

<script>
var url="jsontest.php";
(async ()=>{
  for(var i=1;i<1000;i+=100){
    await fetch(
      url + 
      "?beginIndex=" + i +
      "&endIndex=" + (i+99) +
      "&nocash="+new Date().getTime()
      ).then(
        response=>response.json()
      ).then(
        console.log
      );
  }
})();
</script>

• jsontest.php

※時間差がわかるように2秒ずつウェイトをかけています

<?PHP
sleep(2);
print json_encode(range($_GET["beginIndex"],$_GET["endIndex"]));
?>

Comments

[nyaaway]

サンプルまで記載していただいて大変ありがたいです。