Dlaczego .json () zwraca obietnicę?

fetch()Ostatnio bawiłem się z interfejsem API i zauważyłem coś, co było nieco dziwaczne.

let url = "http://jsonplaceholder.typicode.com/posts/6";

let iterator = fetch(url);

iterator
  .then(response => {
      return {
          data: response.json(),
          status: response.status
      }
  })
  .then(post => document.write(post.data));
;

post.datazwraca Promiseobiekt. http://jsbin.com/wofulo/2/edit?js,output

Jednak jeśli jest napisane jako:

let url = "http://jsonplaceholder.typicode.com/posts/6";

let iterator = fetch(url);

iterator
  .then(response => response.json())
  .then(post => document.write(post.title));
;

posttutaj jest standard, do Objectktórego można uzyskać dostęp do atrybutu tytułu. http://jsbin.com/wofulo/edit?js,output

Moje pytanie brzmi: dlaczego response.jsonzwraca obietnicę w literale obiektu, ale zwraca wartość, jeśli została zwrócona?

Dlaczego response.jsonzwraca obietnicę?

Ponieważ otrzymujesz, responsegdy tylko nadejdą wszystkie nagłówki. Wywołanie .json()daje kolejną obietnicę dotyczącą treści odpowiedzi http, która nie została jeszcze załadowana. Zobacz także Dlaczego obiekt odpowiedzi z JavaScript Fetch API jest obietnicą? .

Dlaczego otrzymam wartość, jeśli zwrócę obietnicę od thenobsługi?

Ponieważ tak działają obietnice . Możliwość zwracania obietnic z wywołania zwrotnego i przyjmowania ich jest ich najważniejszą funkcją, dzięki czemu można je łączyć w łańcuchy bez zagnieżdżania.

Możesz użyć

fetch(url).then(response => 
    response.json().then(data => ({
        data: data,
        status: response.status
    })
).then(res => {
    console.log(res.status, res.data.title)
}));

lub jakakolwiek inna metoda dostępu do poprzedniej obietnicy skutkuje utworzeniem łańcucha .then (), aby uzyskać status odpowiedzi po oczekiwaniu na treść json.

Ta różnica wynika bardziej niż fetch()konkretnie z zachowania Obietnic .

Kiedy .then()callback zwraca dodatkowy Promise, następny .then()callback w łańcuchu jest zasadniczo powiązany z tą obietnicą, otrzymując rozwiązanie lub odrzucenie spełnienia i wartości.

Drugi fragment można również zapisać jako:

iterator.then(response =>
    response.json().then(post => document.write(post.title))
);

Zarówno w tej formie, jak i w Twojej, wartość postokreśla przyrzeczenie zwrócone z response.json().

Kiedy jednak zwracasz zwykły Object, .then()uważa, że ​​wynik jest pomyślny i rozwiązuje się natychmiast, podobnie do:

iterator.then(response =>
    Promise.resolve({
      data: response.json(),
      status: response.status
    })
    .then(post => document.write(post.data))
);

postw tym przypadku jest po prostu tym, Objectco stworzyłeś, który posiada Promisew swojej datawłasności. Oczekiwanie na wypełnienie się tej obietnicy jest wciąż niepełne.

Ponadto, to, co pomogło mi zrozumieć ten konkretny scenariusz, który opisałeś, to dokumentacja Promise API , w szczególności gdzie wyjaśnia, w jaki sposób obietnica zwrócona przez thenmetodę zostanie rozwiązana w różny sposób w zależności od tego, co zwraca program obsługi fn :

jeśli funkcja obsługi:

• zwraca wartość, a obietnica zwrócona następnie zostaje rozwiązana z wartością zwracaną jako wartością;
• zgłasza błąd, zwrócona obietnica zostaje odrzucona z wyrzuconym błędem jako wartością;
• zwraca już rozwiązaną obietnicę, obietnica zwrócona do tego czasu zostaje rozwiązana z wartością tej obietnicy jako jej wartością;
• zwraca już odrzuconą obietnicę, obietnica zwrócona do tego czasu zostaje odrzucona z wartością tej obietnicy jako wartością.
• zwraca inny przedmiot obietnicy oczekującej, rozstrzygnięcie / odrzucenie promesy zwróconej do tego czasu nastąpi po rozwiązaniu / odrzuceniu promesy zwróconej przez opiekuna. Ponadto wartość promesy zwróconej do tego czasu będzie taka sama jak wartość promesy zwróconej przez handlowca.

Oprócz powyższych odpowiedzi, oto, w jaki sposób możesz obsłużyć odpowiedź serii 500 z interfejsu API, w której pojawia się komunikat o błędzie zakodowany w formacie json:

function callApi(url) {
  return fetch(url)
    .then(response => {
      if (response.ok) {
        return response.json().then(response => ({ response }));
      }

      return response.json().then(error => ({ error }));
    })
  ;
}

let url = 'http://jsonplaceholder.typicode.com/posts/6';

const { response, error } = callApi(url);
if (response) {
  // handle json decoded response
} else {
  // handle json decoded 500 series response
}