Chromeの開発ツールでfetchして結果をみるには

こんばんは、子供たちが最近ジョジョの奇妙な冒険にハマっている@kjunichiです。

背景

仕事で、新旧システムが混在している環境で、新旧システムが同一のドメインなのでクライアントからはJavaScript経由で通信すれば、旧システムと通信できるはずだが、インフラ周りの設定等あるかものなので、実際に確認してみようということに。

いまどきなら、fetch APIだろ

XMLHttpRequestでのサーバとの通信もすっかりこのところ手を動かしておらず、忘れ気味。 fetchもさすがに2021年なので、普通に使えるだろと思い、Chromeの開発ツール内におもむろに MDNからコピッた以下のコードを実行するものの、肝心のサーバからの応答がコンソールに出力されない。

fetch('/entry/2021/11/22/214623')
  .then(response => response.text())
  .then(data => console.log(data));

解決方法

await使って同期してからconsole.logでサーバからの応答を確認できた。

res = await fetch('/entry/2021/11/22/214623')
text = await res.text()
console.log(text)

としてら、無事にサーバーからの応答を確認できた。

オチ

が、どうやら正常にサーバーが応答すれば、最初の方法でもコンソールに出力される模様ｗ