[javascriipt] promise.allの挙動に関して

Question

解決したいこと

promise.allにて、axiosによるGetリクエストを複数送信しています。
リクエスト数が増えると以下エラーが発生してしまい、データを取得できません。

何か回避策などご存知な方いらっしゃいましたらご教授いただきたいです。
よろしくお願いします。

エラー内容

Error occurred prerendering page "/<ルート名>". Read more: https://nextjs.org/docs/messages/prerender-error
Error: getaddrinfo ENOTFOUND <ドメイン名>
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:109:26)
info  - Generating static pages (2/2)

補足

下記コードの"urls"には、Getプロトコルにてデータ取得したいURLが記述してあります。
取得対象のURLは全部で900前後を予定していて、試しに取得数を100くらいまでに減らすと問題なくデータを取得できます。

コード

urls = [
  "https://hoge/1",
  "https://hoge/2",
  ...
  "https://hoge/900",
]

async getData() {
  const res = await axios.all(
    urls.map((url) => {
      const res = axios.get(url)
    return res
    })
  )
  return res.data
}

export async function getStaticProps() {
  const result = await getData();
  return { props: { data: result } };
}

実行環境

• axios@0.27.2
• next@13.0.4
• react@18.2.0
• react-dom@18.2.0

Comments

[kazuhiro_ikeda]

関係ないかもで備考ですが、本コードはNext.jsのgetStaticPropsにて動作してます故、npm run build時に動作しております。

[int32_t]

urls 中の <ドメイン名> が間違っているということはありませんか?

[think49]

> 取得対象のURLは全部で900前後を予定していて、試しに取得数を100くらいまでに減らすと問題なくデータを取得できます。

900前後あるURLは100個単位に分割して、9回リクエストした場合、すべてのデータを取得できるのでしょうか。

Answer 1

なんとも言えませんが、要求量というよりはurlがおかしい箇所があったりするのでは？
fetchでテストする限り1000個くらいなげてもPromiseには特に問題はなさそうです。
（自前サーバーでなければスパム攻撃とみなされそうな気がしますが）
sample.php

<?PHP
print "res".$_GET["x"];

window.addEventListener('DOMContentLoaded', ()=>{
  const n=1000;
  const url="sample.php";
  const urls=Array(n).fill(null).map((_,x)=>`${url}?x=${x}`);
  Promise.all(urls.map(x=>fetch(x).then(res=>res.text()))).then(res=>{
    console.log(res);
  });
});

(参考)error処理

わざとエラーを返すsample2.php

<?PHP
if($_GET["x"]=="3"){
header('HTTP/1.1 403 Forbidden');
  exit;
}
if($_GET["x"]=="5"){
header('HTTP/1.1 500 Internal Server Error');
exit;
}
print "res".$_GET["x"];

(1)エラーを無視

window.addEventListener('DOMContentLoaded', ()=>{
  const n=10;
  const url="sample2.php";
  const urls=Array(n).fill(null).map((_,x)=>`${url}?x=${x}`);
  Promise.all(urls.map(x=>fetch(x).then(res=>res.text()))).then(res=>{
    console.log(res);
  });
});

(2)エラーを含むデータを取得

window.addEventListener('DOMContentLoaded', ()=>{
  const n=10;
  const url="sample2.php";
  const urls=Array(n).fill(null).map((_,x)=>`${url}?x=${x}`);
  Promise.all(urls.map(x=>fetch(x).then(res=>{
    if(res.ok) return res.text();
    throw new Error(res.status);
  }).catch(err=>err))).then(res=>{
    console.log(res);
  });
});

(3)エラーを取得したら止める

window.addEventListener('DOMContentLoaded', ()=>{
  const n=10;
  const url="sample2.php";
  const urls=Array(n).fill(null).map((_,x)=>`${url}?x=${x}`);
  Promise.all(urls.map(x=>fetch(x).then(res=>{
    if(res.ok) return res.text();
    throw new Error(res.status);
  }))).then(res=>{
    console.log(res);
  }).catch(err=>{
    console.log(err);
  });
});

Comments

[kazuhiro_ikeda]

>なんとも言えませんが、要求量というよりはurlがおかしい箇所があったりするのでは？
>fetchでテストする限り1000個くらいなげてもPromiseには特に問題はなさそうです。
ご確認ありがとうございます。

> （自前サーバーでなければスパム攻撃とみなされそうな気がしますが）
こちらな気がしてきました。
どのAPIにアクセスしてるかというとpokeAPI※でして、以下ドキュメントを見ているとリクエストの制限がありそうです（a dairy rate limit of 300 requests per resource per IP address...）
https://pokeapi.api-docs.io/v2.0/intro/nJa4jkWuFLPX3PWiD

※すみません、最初に補足で記述すべきでしたね

[kazuhiro_ikeda]

> 以下ドキュメントを見ているとリクエストの制限がありそうです（a dairy rate limit of 300 requests per resource per IP address...）
とはいえ今回の私の実装では、一つのリソースに対して何回もアクセスするのではなく、一度に複数のリソースに対してアクセスする　といったものですので、なぜ取得できなかったのか？まだ分かってません。

ただ、ご指摘の通り1000近くのリクエストを投げるのはよろしくないでしょうし、該当APIにはGraphAPIも用意されていることがわかりましたので、こちらも使用を検討しようと思います。

・promise.allの実装には問題なさそう
・リクエストを送る先のAPIを変更する

ということで、本質問はクローズとさせていただきます。
ご回答ありがとうございました。

[yambejp]

同一IPアドレスから一日300回までしか受け付けないとすると、900回で失敗した後100回なげたら通るというのはちょっと解せないですが、間隔をあければ300回以上うけつけてくれるなら、うまくコントロールすれば実現できるかもしれませんね。