Zenn
💡

fetch() で取得したレスポンスを読んでもいいのは1回だけ

2024/10/10に公開
JavaScript
TypeScript
tech

結論から

タイトル通り。
-> どうしても読み取る必要がある場合は clone() で複製したものを読み取ればいい。

問題

fetch で取得したレスポンスを text() で一度読み取った後に、別の場所で改めて arrayBuffer() で読み取ろうとしたところエラーが発生し、解決策をググってもなかなかヒットせずややハマった。

解決

MDN の fetch API に、ちょうど自分がやろうとしていることに関しての注意事項があった。

ロックされ妨害されたストリーム
（中略）
これは、同じレスポンス（またはリクエスト）本体を複数回読み取ることは不可能であるということです。

// example
async function getData() {
  const url = "https://example.org/products.json";
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`レスポンスステータス: ${response.status}`);
    }

    const json1 = await response.json();
    const json2 = await response.json(); // 例外が発生
  } catch (error) {
    console.error(error.message);
  }
}

本体を複数回読み込む必要がある場合は、本体を読み込む前に Response.clone() を呼び出す必要があります。
（以下省略）

参考

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch#ロックされ妨害されたストリーム

Discussion