レスポンスを二度読むと失敗する？textとcloneを試す

今回の仕上がり

同じResponseでtext()を二度呼ぶと、二度目はTypeErrorになりました。読む前にclone()した別のResponseなら、それぞれを読めます。表示とログに同じ文章を使うだけなら、一度読んだ文字列を変数に保存する方法で足ります。

HCN公開APIの操作から、取得後の本文をどう扱うかを独立した小さな実験にしました。ここでは外部APIへ通信せず、new Response('星あつめ')を作ります。ネットワーク障害やサービスの制限を調べる実験ではありません。

操作と比較するコード

1. 下の作例を開き、「3通りを比較」を押します。
2. bodyUsedが読む前はfalse、読んだ後はtrueになることを確認します。
3. 二度目のtextと読込後のcloneはTypeError、読込前のcloneでは2つとも「星あつめ」になることを比べます。

const response = new Response('星あつめ');
const copy = response.clone(); // 読む前に複製
const first = await response.text();
const second = await copy.text();

文字列を二か所で使うだけなら、次のように一度だけ読みます。

const text = await response.text();
output.textContent = text;
console.log(text);

上の2つのコードは別々の方法です。同じresponseに続けて実行するコードではありません。作例ZIPには各Responseを作り直した実装が入っています。

つまずきやすい点

読込後にclone()しても元に戻りません。巨大な本文を安易に複製すると、片側が読み終わらない間のバッファが増える可能性があります。必要がなければ一度読んだ値を再利用しましょう。今回の短い文字列での成功は、大きな動画やストリームでのメモリ使用量を保証しません。

仕様の参照：MDN Response.clone()。HTTPの成功判定は別の問題なので、fetchの404を切り分ける実験も併せて読めます。

操作できる作例

作例を別画面で開く · 作例ZIPを保存