Gegevens ophalen van een ReadableStream-object?

Hoe kan ik informatie krijgen van een ReadableStream-object?

Ik gebruik de Fetch API en ik zie dat dit niet duidelijk wordt uit de documentatie.

De body wordt geretourneerd als een ReadableStreamen ik wil gewoon toegang tot een eigenschap binnen deze stream. Onder Reactie in de tools voor browserontwikkeling, lijkt het alsof deze informatie is georganiseerd in eigenschappen, in de vorm van een JavaScript-object.

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();
    })

Antwoord 1, autoriteit 100%

Om toegang te krijgen tot de gegevens van een ReadableStreammoet u een van de conversiemethoden aanroepen (beschikbare documenten hier).

Als voorbeeld:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(function(response) {
    // The response is a Response instance.
    // You parse the data into a useable format using `.json()`
    return response.json();
  }).then(function(data) {
    // `data` is the parsed version of the JSON returned from the above endpoint.
    console.log(data);  // { "userId": 1, "id": 1, "title": "...", "body": "..." }
  });

BEWERK:Als uw gegevensretourtype geen JSON is of u geen JSON wilt, gebruik dan text()

Als voorbeeld:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(function(response) {
    return response.text();
  }).then(function(data) {
    console.log(data); // this will be a string
  });

Ik hoop dat dit helpt om dingen op te helderen.


Antwoord 2, autoriteit 23%

Sommige mensen vinden een async-voorbeeld misschien handig:

var response = await fetch("https://httpbin.org/ip");
var body = await response.json(); // .json() is asynchronous and therefore must be awaited

json()converteert de hoofdtekst van het antwoord van een ReadableStreamnaar een json-object.

De await-instructies moeten worden verpakt in een async-functie, maar u kunt await-instructies rechtstreeks in de console van Chrome uitvoeren (vanaf versie 62).


Antwoord 3, autoriteit 11%

res.json()retourneert een belofte. Probeer …

res.json().then(body => console.log(body));

Antwoord 4, autoriteit 6%

Beetje laat op het feest, maar had wat problemen met het verkrijgen van iets bruikbaars uit een ReadableStreamgeproduceerd op basis van een Odata $batch-verzoek met behulp van het Sharepoint Framework.

Had vergelijkbare problemen als OP, maar de oplossing in mijn geval was om een ​​andere conversiemethode te gebruiken dan .json(). In mijn geval werkte .text()als een zonnetje. Er was echter wat gehannes nodig om wat bruikbare JSON uit het tekstbestand te halen.


Antwoord 5, autoriteit 4%

Houd er rekening mee dat je een stream maar één keer kunt lezen, dus in sommige gevallen moet je het antwoord mogelijk klonen om het herhaaldelijk te kunnen lezen:

fetch('example.json')
  .then(res=>res.clone().json())
  .then( json => console.log(json))
fetch('url_that_returns_text')
  .then(res=>res.clone().text())
  .then( text => console.log(text))

Antwoord 6, autoriteit 4%

Als je het antwoord alleen als tekst wilt en niet wilt converteren naar JSON, gebruik dan https://developer.mozilla.org/en-US/docs/Web/API/Body/texten dan thenom de werkelijke resultaat van de belofte:

fetch('city-market.md')
  .then(function(response) {
    response.text().then((s) => console.log(s));
  });

of

fetch('city-market.md')
  .then(function(response) {
    return response.text();
  })
  .then(function(myText) {
    console.log(myText);
  });

Antwoord 7

Ik heb een hekel aan de kettingen dan. De tweede heeft dan geen toegang tot status. Zoals eerder vermeld ‘respons.json()’ retourneert een belofte. Het vervolgens retourneren van het resultaat van ‘respons.json()’ in een handelingen die vergelijkbaar zijn met een tweede dan. Het heeft de toegevoegde bonus dat het binnen de reikwijdte van de reactie valt.

return fetch(url, params).then(response => {
    return response.json().then(body => {
        if (response.status === 200) {
            return body
        } else {
            throw body
        }
    })
})

Other episodes