non vorrei lavorare

2020年度からの小学校プログラミング教育の必修化を親として迎えるブロガーの書く、子供との日常

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)

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

オチ

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