Fetch APIを使った際に地味にハマった件

fetch('http://example.com')
.then(response => response.json())
.then(data => {
  // 処理
})

response.json()でJSONを取得できる、と斜め読みして適当に書いたらうまくいかないなんでだーってなったけどresponse.json()の返り値はPromise。 ちゃんとログにもPromiseが返ってることが表示されていたのに何故か脳が理解しようとせず無駄に時間がかかったのでメモしておく。

実際には以下のようにPromise.allを使って複数のPromiseを処理するように書いていたのでPromise.allの使い方が間違っているのか？　みたいな謎思考も相まって時間がかかったという言い訳も書いておく。

Promise.all([
  fetch('http://example.com'),
  fetch('http://example.com')
])
.then(responses => Promise.all(responses.map(res => res.json())))
.then(data => {
  // 処理
})