fetchAPI及びpromiseについて

Question

fetchAPIの基本的な動作で不明な点があり、ご教示いただきたいです。
（promiseの理解が不正確であることが原因かもしれないです。）

まず以下のようにレスポンスをjsonオブジェクト化したものをコンソール出力できることを確認しました。

fetch(`https://swapi.co/api/films/1`)
  .then(res => res.json())
  .then(json => console.log(json))

=> Promise {<pending>}
=> VM3928:3 {title: "A New Hope", episode_id: 4, opening_crawl: "It is a period of civil war.
   ↵Rebel spaceships, st…er
   ↵people and restore
   ↵freedom to the galaxy....", director: "George Lucas", producer: "Gary Kurtz, Rick McCallum", …}

続いて、2つのthenを1つにまとめることができるのではないかと思い試したところ、以下のような結果となりました。

fetch(`https://swapi.co/api/films/1`)
  .then(res => console.log(res.json()))

=> Promise {<pending>}
=> VM3881:2 Promise {<pending>}

この場合、先程jsonオブジェクトを返していたres.json()が、Promiseオブジェクトを返しているように思われます。

MDN等のリファレンスを見ても理由が分からなかったため質問した次第です。
ご教示のほどよろしくお願いします????

Answer 1

Fetch APIにおける response.json() が、なぜPromiseを返すのか？というご質問でしょうか。であれば、「Promiseを返すメソッドだから」としか言えないです。MDNにも次のように提示されています。

Body.json()
Response ストリームを取得し、それを完全に読み込む。これは、 JSON オブジェクトで解決する promise を返す。

Comments

[k-tokitoh]

回答ありがとうございます。
誤解をしていたことに気づけました！

「ある`.then()`に渡した関数の戻り値は、その次の`.then()`に渡した関数の引数と一致する」という勘違いをしていました。
（質問の1つ目のコード例でいうと、`res.json()`と`json`が一致していると思っていました。）

実際には以下であると理解しました。`.then()`を2つチェーンする場合、
- 1つ目の`.then()`に渡した関数の戻り値はPromiseオブジェクトである必要がある。
- 2つ目の`.then()`に渡した関数の引数は、上記のPromiseオブジェクト内でのresolveの呼び出し時に渡される引数に一致する。

なお、直接関係ないですが、streamをつかってレスポンスを取得する別アプローチなどを試してみて理解が深まった気がするのでメモとして残させてください。
```
fetch(`https://swapi.co/api/films/1`)
.then(res=> {
return res.body.getReader().read()
}).then(({ value }) => {
console.log(JSON.parse(new TextDecoder().decode(value)))
})

=> Promise {<pending>}
=> VM9925:5 {title: "A New Hope", episode_id: 4, opening_crawl: "It is a period of civil war.
=> ↵Rebel spaceships, st…er
=> ↵people and restore
=> ↵freedom to the galaxy....", director: "George Lucas", producer: "Gary Kurtz, Rick McCallum", …}
```

[maisumakun]

> 1つ目の`.then()`に渡した関数の戻り値はPromiseオブジェクトである必要がある。

ありません。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

[thyda.eiqau]

maisumakunさん、補足ありがとうございます。

k-tokitohさん、このコードでコンソールに 'May the Forcebe with you' が出力されることがおわかりになるでしょうか。
fetch(`/`)
.then(() => 'May the Force')
.then(str => str + 'be with you')
.then(str => { console.log(str); });

Promiseはたしかに複雑なのですが、現時点でそこまで複雑に考える必要はなく、【「ある`.then()`に渡した関数の戻り値は、その次の`.then()`に渡した関数の引数と一致する」という】認識でも大丈夫だと思います。

[k-tokitoh]

maisumakunさん、thyda.eiqauさん、ありがとうございます。

> 'May the Forcebe with you' が出力されることがおわかりになるでしょうか。
はい、こちら納得できています。

MDN web docsをみて、then()に渡したハンドラー関数の戻り値がpromiseオブジェクトである場合とそれ以外の値である場合を分けて考える必要がある、と把握しました。
まだMDNの記述が十分にピンときていないのですが、いったんこの程度の理解に留めておきたいと思います。ありがとうございました！