Problem z .then()

Cześć !

Nie rozumiem do końca działania .then() .
Wiem że wykonuje on callback jeśli promise dostanie status "resolved" a potem zwraca kolejny promise.

Chciałem pobrać dane postaci ze Star Wars.
Ten kod loguje mi bohatera:

function getHero(url) {
  fetch(url)
    .then(data => data.json())
    .then(hero => console.log(hero));
}
getHero("https:/swapi.co/api/people/13/")

a ten nie:

function getAnotherHero(url) {
  fetch(url).then(data => console.log(data.json()));
}
getAnotherHero("https:/swapi.co/api/people/14/");

Dla czego getAnotherHero nie wykonuje console.log() ?

W pierwszym then ustalasz w jaki sposób mają zostać zwrócone dane (np json), a w drugim je odbierasz

Zwróć uwagę na to, co zwraca metoda json.

.__. napisał(a):

W pierwszym then ustalasz w jaki sposób mają zostać zwrócone dane (np json), a w drugim je odbierasz

Nie zgadzam się.
Ustalanie typu danych, jaki ma być zwrócony z serwera odbywa się poprzez nagłówek Accept.
W pierwszym then lambda przyjmuje jako argument obiekt odpowiedzi, i zwraca Promise, którego wynikiem jest sparsowanie otrzymanej już odpowiedzi jako JSON.

Wiem że metoda .json() wyciąga z całej odpowiedzi z serwera "mięso" (body) i zwraca obiekt.

Ale dalej nie mam wyjaśnienia dla czego drugi zapis nie działa. Wydawało mi się że one są sobie równoważne ?

function getAnotherHero(url) {
  fetch(url).then(async data => console.log(await data.json()));
}
getAnotherHero("https://swapi.co/api/people/14/");

data.json() to też funkcja która zwraca Promise, console.log się wykonuje (chociaż miałeś literówkę w URL) z Promise, ale jak dodasz await to będziesz miał już dane wynikowe.

Bo w pierwszym .then() w body nie ma jeszcze "obiektu" jest natomiast ReadableStream który trzeba sobie obsłużyć. Metoda .json() robi to za ciebie i zwraca kolejnego promisa który po wykonaniu się zwraca sparsowany response:

fetch(url)                                           
  .then(data => data.json())  // metoda json jest jedna z metod konwersji z strumienia danych na promisa z wynikiem, w tym miejscu body jeszcze nie zostalo pobrane
  .then(console.log);         // po tym jak promise zwrocony przez data.json() zostanie rozwiazany, zwroci on wynik z ReadableStream

Tak wiec twoj drugi kawalek kodu bedzie dzialac jezeli zmienisz go troche:

function getAnotherHero(url) {
  fetch(url).then(data => data.json().then(console.log)); // ten kod dziala tak samo jak ten powyzej
}
getAnotherHero("https://swapi.co/api/people/14/");

Szczegolowiej:
https://developer.mozilla.org/en-US/docs/Web/API/Body/json
https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream