Verstehen, warum der Abruf das Warten zweimal erfordert✨

Die Fetch-API von JavaScript wird häufig für HTTP-Anfragen verwendet, aber es kann etwas schwierig sein zu verstehen, warum sie manchmal zwei Wait-Anweisungen erfordert. Wenn Sie schon einmal mit fetch gearbeitet haben, sind Sie möglicherweise auf Code wie diesen gestoßen:

const response = await fetch('https://api.example.com/data');
const data = await response.json();

Lassen Sie uns dies aufschlüsseln und verstehen, warum dieses Muster notwendig ist. ?

Der zweistufige Abrufprozess ?️

Die Abruf-API ist für die asynchrone Verarbeitung von Netzwerkanfragen konzipiert, ihr Verhalten ist jedoch in zwei Hauptphasen unterteilt:

1. Antwort abrufen ?

   • Wenn Sie fetch aufrufen, wird ein Promise zurückgegeben, das in das Antwortobjekt aufgelöst wird, sobald die Netzwerkanforderung abgeschlossen ist.
   • In diesem Schritt wird nicht der Text der Antwort verarbeitet. Es stellt nur sicher, dass die Anfrage erfolgreich war und Header verfügbar sind.

2. Lesen des Antworttextes ?

   • Das Response-Objekt verfügt über Methoden wie .json(), .text() und .blob() zum Lesen des tatsächlichen Inhalts.
   • Diese Methoden geben auch Versprechen zurück, da das Lesen des Körpers asynchron ist. Dies ist notwendig, um große Nutzlasten effizient zu verarbeiten, ohne den Hauptthread zu blockieren.

Was passiert während der ersten Wartezeit? ⏳

Wenn Sie const Response = waiting fetch(url); schreiben, passiert Folgendes:

1. Netzwerkanfrage gesendet: ?

   • Der Browser initiiert eine HTTP-Anfrage an die angegebene URL.
   • Dazu gehört das Auflösen des Domänennamens, das Einrichten einer TCP-Verbindung und das Senden der HTTP-Header und des HTTP-Textkörpers (für POST-Anfragen).

2. Antwortmetadaten empfangen: ?

   • Der Abrufaufruf wird aufgelöst, sobald der Server mit der Statuszeile (z. B. HTTP/1.1 200 OK) und Headern antwortet. An dieser Stelle:
     • Der Status (z. B. 200, 404 oder 500) und der Statustext (z. B. „OK“ oder „Nicht gefunden“) sind verfügbar.
     • Antwortheader wie Content-Type, Content-Length und alle vom Server gesendeten benutzerdefinierten Header sind zugänglich.

3. Antwortobjekt erstellt: ?️

   • Der Browser erstellt ein Response-Objekt, das Metadaten über die Antwort enthält. Dazu gehört:
     • Header: Zugriff über Response.headers, wodurch Sie bestimmte Header wie Content-Type oder Authorization überprüfen können.
     • Text: Zu diesem Zeitpunkt wurde der Text noch nicht vollständig gelesen oder analysiert – er verbleibt als lesbarer Stream.

Zum Beispiel, wenn der Server Folgendes zurückgibt:

   HTTP/1.1 200 OK
   Content-Type: application/json
   Content-Length: 123

   {"message": "Hello, world!"}

Das Antwortobjekt enthält:

• Status: 200 ✅
• statusText: „OK“ ✅
• Header: Eine iterierbare Sammlung der Antwortheader (z. B. Content-Type: application/json).
• body: Ein lesbarer Stream, der noch nicht analysiert wurde.

Was passiert während der zweiten Wartezeit? ?

Wenn Sie const data = waiting Response.json(); schreiben, werden die folgenden Schritte ausgeführt:

1. Körperstrom lesen: ?

   • Der Hauptteil der Antwort (noch in Rohform) wird als Stream gelesen. Abhängig von der von Ihnen verwendeten Methode werden die Rohdaten entsprechend verarbeitet:
     • .json(): Analysiert den Stream als JSON und gibt ein JavaScript-Objekt zurück.
     • .text(): Liest den Stream als reine Textzeichenfolge.
     • .blob(): Liest den Stream als binäres großes Objekt.

2. Parsen und Auflösen: ?

   • Die json()-Methode analysiert die Rohdaten (z. B. {"message": "Hello, world!"}) in ein verwendbares JavaScript-Objekt (z. B. { message: "Hello, world!" }).
   • Dieser Parsing-Prozess ist asynchron, da er die Verarbeitung potenziell großer Datenmengen beinhaltet.

3. Lösungsversprechen: ✅

   • Das von Response.json() zurückgegebene Promise wird in die analysierten Daten aufgelöst, die dann in Ihrer Anwendung verwendet werden können.

Warum sind zwei Warten-Anweisungen erforderlich?

Hier ist der Grund, warum Sie zweimal warten müssen:

1. Erstes Warten (Warten auf die Antwort):

   • Der Abrufaufruf stellt die Antwortdaten nicht sofort bereit; es gibt dir ein Versprechen. Sie müssen darauf warten, um das Antwortobjekt zu erhalten.

2. Zweite Wartezeit (Analyse des Körpers):

   • Die .json()-Methode (oder andere Body-Reading-Methoden) gibt ein weiteres Versprechen zurück. Sie müssen darauf warten, um den analysierten Inhalt zu extrahieren.

Wenn Sie eine der beiden Wartezeiten überspringen, wird es wahrscheinlich zu unerwartetem Verhalten kommen:

• Das erste Warten überspringen: Sie arbeiten mit dem ungelösten Versprechen statt mit dem eigentlichen Antwortobjekt.
• Das zweite Warten überspringen:Sie erhalten ein Versprechen anstelle der geparsten Daten.

Beispiel mit Fehlerbehandlung ?️

So können Sie Fehler beim Arbeiten mit fetch richtig behandeln:

const response = await fetch('https://api.example.com/data');
const data = await response.json();

Häufige Fallstricke ⚠️

1. Fehler werden nicht behandelt:

   • fetch gibt bei HTTP-Fehlern wie 404 oder 500 keinen Fehler aus. Sie müssen „response.ok“ oder „response.status“ manuell überprüfen.

2. Die zweite Wartezeit überspringen:

   • Wenn Sie vergessen, auf .json() zu warten, kann dies zu Fehlern führen, wenn Sie mit einem Versprechen statt mit tatsächlichen Daten arbeiten.

3. Verwechslung zwischen Fetch und älteren APIs:

   • Entwickler, die von älteren APIs wie XMLHttpRequest wechseln, erwarten möglicherweise synchrones Verhalten, aber der Abruf basiert vollständig auf Promise.

Abschluss ?

Die Verwendung von zwei Wait-Anweisungen mit fetch mag auf den ersten Blick überflüssig erscheinen, ist aber ein logisches Ergebnis des asynchronen Designs. Das erste Warten stellt sicher, dass die Antwort einschließlich Header und Metadaten empfangen wurde, während das zweite Warten den Antworttext verarbeitet. Wenn Sie diesen Ablauf verstehen, können Sie zuverlässigeren und wartbareren asynchronen Code schreiben. ?

Das obige ist der detaillierte Inhalt vonVerstehen, warum der Abruf das Warten zweimal erfordert✨. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!