Warum gibt die .json()-Methode von Fetch manchmal ein Versprechen und manchmal einen Wert zurück?

Untersuchung des Promise-Verhaltens in der .json()-Methode von Fetch

Bei der Erkundung der Fetch-API tritt eine interessante Eigenart bei der .json()-Methode auf. Sehen wir uns genauer an, warum es unter bestimmten Umständen ein Versprechen und unter anderen einen direkten Wert zurückgibt.

Betrachten Sie den folgenden Ausschnitt:

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

Hier liefert post.data ein Versprechensobjekt, was darauf hindeutet Der .json()-Aufruf innerhalb des ersten .then()-Handlers gibt ein Versprechen zurück.

Wenn wir jedoch den Code so ändern, dass er einfach verkettet ist .json():

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

Beitrag wird jetzt zu einem Objekt und ermöglicht den direkten Zugriff auf das Titelattribut.

Um dieses Rätsel zu lösen, müssen wir die Natur von Versprechen verstehen. .json() initiiert einen asynchronen Vorgang, um den HTTP-Antworttext als JSON abzurufen und ein Versprechen zurückzugeben. Dieses Versprechen stellt die eventuelle Verfügbarkeit der JSON-geparsten Daten dar.

Wenn das Versprechen von einem .then()-Handler zurückgegeben wird (wie im ersten Beispiel), bleibt das Versprechen innerhalb der Kette bestehen. Wenn jedoch ein Wert zurückgegeben wird (wie im zweiten Beispiel), gilt das Versprechen als „erfüllt“ und der zurückgegebene Wert wird als Ergebnis des äußeren .then() übernommen.

Um mit solchen Situationen umzugehen, Sie können die Versprechen entweder mit verschachtelten .then()s verketten:

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

Oder Sie verwenden moderne asynchrone Schlüsselwörter wie async und Warten:

const response = await fetch(url);
const data = await response.json();
console.log(response.status, data.title);

Denken Sie daran, immer den HTTP-Antwortstatus zu überprüfen, bevor Sie versuchen, den JSON zu analysieren, da dieser möglicherweise nicht immer im erwarteten Format vorliegt.

Das obige ist der detaillierte Inhalt vonWarum gibt die .json()-Methode von Fetch manchmal ein Versprechen und manchmal einen Wert zurück?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!