Wie kann ich Informationen von einem ReadableStream
Objekt erhalten?
Ich verwende die Fetch-API und sehe dies nicht in der Dokumentation.
Der Körper wird als zurückgegeben ReadableStream
und ich möchte einfach auf eine Eigenschaft innerhalb dieses Streams zugreifen. Unter Antwort in den Browser-Entwicklungstools scheinen diese Informationen in Form eines JavaScript-Objekts in Eigenschaften organisiert zu sein.
fetch('http://192.168.5.6:2000/api/car', obj)
.then((res) => {
if(res.status == 200) {
console.log("Success :" + res.statusText); //works just fine
}
else if(res.status == 400) {
console.log(JSON.stringify(res.body.json()); //res.body is undefined.
}
return res.json();
})
javascript
node.js
reactjs
fetch
Anfänger
quelle
quelle
response.Body.json()
, aber es wird kursiv angezeigt. TypeError: Die Eigenschaft 'json' von undefiniertem kursiv kann nicht gelesen werden . Liegt das daran, dass die Eigenschaft bodyUsed ebenfalls auf false gesetzt ist? Ich kann diesen Text jedoch unter der Registerkarte "Antwort" in den Browser-Entwicklertools anzeigen. Es gibt eine Fehlermeldung, die ich abrufen möchte.console.log(res.json());
? Sehen Sie die Daten, die Sie erwarten?res.status == 200
?Antworten:
Um von einem auf die Daten zugreifen zu können
ReadableStream
, müssen Sie eine der Konvertierungsmethoden aufrufen (Dokumente hier verfügbar ).Als Beispiel:
BEARBEITEN: Wenn Ihr Datenrückgabetyp nicht JSON ist oder Sie JSON nicht möchten, verwenden Sie
text()
Als Beispiel:
Hoffe, das hilft, die Dinge zu klären.
quelle
res.body
(dies ist nicht Teil meines Beispiels)? Können Sie einen Beispielcode in Ihrer ursprünglichen Frage freigeben, um klarer zu machen, wo Ihr Problem liegen könnte?Einige Leute mögen ein
async
Beispiel nützlich finden:json()
konvertiert den Körper der Antwort von einemReadableStream
in ein JSON-Objekt.Die
await
Anweisungen müssen in eineasync
Funktion eingeschlossen sein. Sie könnenawait
Anweisungen jedoch direkt in der Konsole von Chrome ausführen (ab Version 62).quelle
res.json()
gibt ein Versprechen zurück. Versuchen ...quelle
.then
Anrufefetch(...).then(res => res.json()).then(data => console.log(data))
Etwas spät zur Party, hatte aber einige Probleme damit, etwas Nützliches
ReadableStream
aus einer Odata $ Batch-Anfrage herauszuholen , die das Sharepoint Framework verwendet.Hatte ähnliche Probleme wie OP, aber die Lösung in meinem Fall bestand darin, eine andere Konvertierungsmethode als zu verwenden
.json()
. In meinem Fall.text()
hat es wie ein Zauber funktioniert. Einige Fummelei war jedoch notwendig, um einige nützliche JSON aus der Textdatei zu erhalten.quelle
return $data;
. Ich konnte diese Antwort endlich im Browser mitfetch(...).then(response => response.text()).then(data => console.log(data));
Wenn Sie die Antwort nur als Text wünschen und nicht in JSON konvertieren möchten, verwenden Sie https://developer.mozilla.org/en-US/docs/Web/API/Body/text und dann
then
den tatsächlichen Ergebnis des Versprechens:oder
quelle
Ich mag die Verkettung nicht. Der zweite hat dann keinen Zugriff auf den Status. Wie bereits erwähnt, gibt 'response.json ()' ein Versprechen zurück. Das Rückgabe des then-Ergebnisses von 'response.json ()' erfolgt in einer Aktion ähnlich einer Sekunde. Es hat den zusätzlichen Vorteil, im Umfang der Antwort zu sein.
quelle
then
hilft Ihnen dabei, den endgültigen aufgelösten Wert (denbody
) abzurufen . Wenn Sie sie verschachteln, können Sie denbody
Wert nicht ohne Rückruf oder einen solchen Mechanismus abrufen. Stellen Sie sich Folgendes vor :let body = await fetch(...).then(res => res.json()).then(data => data)
. Dies würde nicht auf verschachtelte Weise funktionieren. Um dies zu überprüfenresponse.status
, können Sie immerthrow
eine Ausnahme innerhalb der ersten machenthen
undcatch
der gesamten Versprechenskette eine hinzufügen .Beachten Sie, dass Sie einen Stream nur einmal lesen können. In einigen Fällen müssen Sie die Antwort möglicherweise klonen, um sie wiederholt zu lesen:
quelle