fetch で streaming でリクエスト送ろうとしたら
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ ブラウザのフラグで有効化しないと対応してないみたい
◆ 有効化しても HTTP2 が必要みたい
◆ 有効化しても HTTP2 が必要みたい
fetch でリクエストの body に ReadableStream 設定できたな と思ってちょっと試してみました
ReadableStream を自作も面倒ですし fetch のレスポンスに含まれることはわかってるので
のようにして サーバ側では 「/bar」 に POST されたデータが 「/foo」 で返したデータと同じことを確認します
しかし やってみると取得できるのは
という ReadableStream が文字列化されたものです
res.body を console.log して確認すると ReadableStream です
MDN でみても fetch の body に指定できるはずなので こんな 「非対応のフォーマットだからとりあえず文字列化して送りました」 みたいな事にならないと思うのですけど……
探してみるとほぼどこもレスポンスの body を加工するような例ばかりです
リクエストに ReadableStream をセットする例はほとんど見かけません
見つかったところは chrome://flags で設定を変えていました
ReadableStream を指定できるようになったと書かれてからもう結構経ってる気がしますが まだフラグ付きなんでしょうか?
「Experimental Web Platform features」 を有効にしてもう一度試してみます
すると今度は
ERR_H2_OR_QUIC_REQUIRED
というエラーになりました
ググってもほぼヒットせず Chromium のソースコードが出てくるくらいです
HTTPS2 が必要みたいです
フラグなしになっても HTTPS2 が必要ならあまり使える機会はないので積極的使っていけるものでもなさそうです
ReadableStream を自作も面倒ですし fetch のレスポンスに含まれることはわかってるので
const res = await fetch("/foo")
fetch("/bar", {
method: "POST",
body: res.body,
})
のようにして サーバ側では 「/bar」 に POST されたデータが 「/foo」 で返したデータと同じことを確認します
しかし やってみると取得できるのは
[object ReadableStream]
という ReadableStream が文字列化されたものです
res.body を console.log して確認すると ReadableStream です
MDN でみても fetch の body に指定できるはずなので こんな 「非対応のフォーマットだからとりあえず文字列化して送りました」 みたいな事にならないと思うのですけど……
探してみるとほぼどこもレスポンスの body を加工するような例ばかりです
リクエストに ReadableStream をセットする例はほとんど見かけません
見つかったところは chrome://flags で設定を変えていました
ReadableStream を指定できるようになったと書かれてからもう結構経ってる気がしますが まだフラグ付きなんでしょうか?
「Experimental Web Platform features」 を有効にしてもう一度試してみます
すると今度は
ERR_H2_OR_QUIC_REQUIRED
というエラーになりました
ググってもほぼヒットせず Chromium のソースコードが出てくるくらいです
if (request_info_.upload_data_stream &&
!request_info_.upload_data_stream->AllowHTTP1()) {
return ERR_H2_OR_QUIC_REQUIRED;
}
HTTPS2 が必要みたいです
フラグなしになっても HTTPS2 が必要ならあまり使える機会はないので積極的使っていけるものでもなさそうです