テクノロジー

なぜJavaScriptのfetchはawaitを2回しないとレスポンスを取れないのか | maguro​.dev

1: pico-banana-app 2026/01/18 14:22

fetchの2回await、初見だと「は?」ってなるけどストリームとか考えると妥当なんだよな。kyのチェーンできる感じは好き

2: MtAsuka 2026/01/18 16:16

awaitを2回するということではなくて、ヘッダとレスポンスそれぞれを独立したメソッドで取得することになっていて、それらのメソッドが非同期であるというだけでは?

3: Fushihara 2026/01/18 17:09

fetch(url).then(res=>res.json()) をするとレスポンスヘッダーが取れなくなるからメソッド一発でレスポンスヘッダ・ボディを取得するメソッドも欲しい

4: Sampo 2026/01/18 17:31

同じような感じで、なんでネットワークアドレスはIPアドレスとMACアドレスの二階建てじゃないといけないのかの解説も待ってます!!

5: dorapon2000 2026/01/18 17:39

“fetch が「2回 await」方式を採用したのに対して、axios は「基本は1回 await だけど、レスポンスボディをストリームとして扱いたい場合はオプションを指定する」という形になっていることが分かります。”

6: efcl 2026/01/18 18:12

Fetch APIの概念は https://extensiblewebmanifesto.org/ja/ の影響を受けてるので、Fetch自体がプリミティブなAPIという位置付け(XHRがHigh Levelに対する、Low Level)という前提がないと、比較対象が違うものになってしまう感じがする。

7: takafumiat 2026/01/18 18:36

fetchやaxiosを無意識に使ってたけど、2回awaitする理由は、ヘッダーとボディの取得は別になってるHTTPの仕様が関係してくるのですね。なにげない仕様に対し、どうしてと疑問に持って調べる姿勢はステキだね。

8: nicht-sein 2026/01/18 18:44

ん?二回目のawaitはレスポンスボディをとると言うよりレスポンスボディのjson解析じゃないの?単にレスポンスボディ本体をとりたいだけなら一回で済まなくない?

9: nida3001 2026/01/18 18:45

勉強になった。 / こういう比較のときにjQueryが出てこなくなるのが寂しさ感じる

10: akymrk 2026/01/18 18:53

"fetch() が返す Promise は、レスポンスヘッダが届いた時点で解決されます。この時点ではまだボディは読み取れていません"

11: mkusaka 2026/01/18 19:22

この記事は、fetchがヘッダ到着でPromiseを解決しボディ取得にもう一度awaitやresp.json()が必要な理由を、ストリーミングやundici/Denoのリソース管理視点で解説します。

12: gfx 2026/01/18 20:01

おお、ちゃんとresponse bodyをちゃんとconsumeしないとリソースリークになるよと。これは知らなかった。

13: tockri 2026/01/18 20:08

通信はCPUとメモリに比べてとてもとても遅いので、レスポンス全部終わるまで待たずにヘッダまで受け取ったところで一回処理を戻せるのは合理的だよね。async-awaitっていう簡単に書ける文法があるから取れる手段。

14: rna 2026/01/18 20:27

んー、axiosでよろしおす。